/* AnythingCo shared tokens and components.
   Content layer: opaque surfaces. Functional layer: Liquid Glass (.glass), floating controls only. */

:root {
  color-scheme: light dark;

  /* Content layer */
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #F4F4F8;
  --label: #1B1B22;
  --label-2: #5E5E6A;
  --accent: #0B6E63;
  --on-accent: #FFFFFF;
  --danger: #B42318;
  --on-danger: #FFFFFF;
  --focus: #0B6E63;
  --switch-off: #76767F;
  --separator: color-mix(in srgb, var(--label) 14%, transparent);

  /* Functional layer: Liquid Glass */
  --glass-fill: rgba(255, 255, 255, 0.66);
  --glass-blur: 24px;
  --glass-edge: color-mix(in srgb, var(--label) 12%, transparent);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  --glass-shadow: rgba(20, 24, 30, 0.3);

  /* Product tiles: color lives in the content layer, never in the chrome */
  --tone-sand: #E9DCC9;
  --tone-sage: #CFDCCB;
  --tone-slate: #C9D3E0;
  --tone-clay: #E6C7B5;

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0C0E;
    --surface: #16191C;
    --surface-2: #1E2327;
    --label: #F1F3F2;
    --label-2: #A5ADA9;
    --accent: #5FD3BF;
    --on-accent: #04201B;
    --danger: #FF8A80;
    --on-danger: #2B0906;
    --focus: #5FD3BF;
    --switch-off: #6B7079;
    --glass-fill: rgba(44, 50, 55, 0.6);
    --glass-highlight: rgba(255, 255, 255, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg: #0A0C0E;
  --surface: #16191C;
  --surface-2: #1E2327;
  --label: #F1F3F2;
  --label-2: #A5ADA9;
  --accent: #5FD3BF;
  --on-accent: #04201B;
  --danger: #FF8A80;
  --on-danger: #2B0906;
  --focus: #5FD3BF;
  --switch-off: #6B7079;
  --glass-fill: rgba(44, 50, 55, 0.6);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.55);
}

/* Accessibility states: Reduce Transparency gets an opaque fallback */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-fill: var(--surface);
    --glass-blur: 0px;
  }
}

/* Increase Contrast: stronger separators, edges and secondary text */
@media (prefers-contrast: more) {
  :root {
    --separator: color-mix(in srgb, var(--label) 50%, transparent);
    --glass-edge: var(--label);
    --label-2: var(--label);
  }
}

/* Browsers without backdrop-filter get opaque surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill: var(--surface);
    --glass-blur: 0px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--label);
  font: 17px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--label-2); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 32px, 1120px); margin-inline: auto; }

.muted { color: var(--label-2); }
.eyebrow { margin: 0; font-size: 15px; font-weight: 600; color: var(--label-2); }
.empty { padding: 40px 16px; text-align: center; color: var(--label-2); margin: 0; }
.status { min-height: 1.5em; margin: 0 0 12px; font-size: 15px; color: var(--label-2); }
.error { margin: 0; font-size: 14px; color: var(--danger); }

/* Liquid Glass: the functional layer only. Blur, translucent fill, hairline edge, top highlight. */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 34px -18px var(--glass-shadow);
  color: var(--label);
}

/* Buttons: one prominent (accent) action per view */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--target);
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--label);
  font-weight: 600;
  text-decoration: none;
}
.btn-prominent { background: var(--accent); color: var(--on-accent); }
.btn-plain { background: transparent; color: var(--accent); padding: 0 12px; }
.btn-danger { background: transparent; color: var(--danger); padding: 0 12px; }
.btn-destructive { background: var(--danger); color: var(--on-danger); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--target);
  height: var(--target);
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--label);
  flex: none;
}

.count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
}

/* Search field */
.search { position: relative; display: block; }
.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--label-2);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-height: var(--target);
  padding: 0 16px 0 42px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
}
.search input::placeholder { color: var(--label-2); }

/* Forms */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font-size: 15px; font-weight: 600; color: var(--label-2); }
.input, .select, .textarea {
  width: 100%;
  min-height: var(--target);
  padding: 10px 14px;
  border: 1px solid var(--separator);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--label);
}
.textarea { min-height: 104px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--label-2); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.hint { margin: 0; font-size: 14px; color: var(--label-2); }

/* Switch: track colour carries the state; the knob moves, so state never relies on colour alone */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: var(--switch-off);
  transition: background-color 0.2s;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }

/* Product tiles: the only place colour lives in the catalogue */
.tone-sand { --tone: var(--tone-sand); }
.tone-sage { --tone: var(--tone-sage); }
.tone-slate { --tone: var(--tone-slate); }
.tone-clay { --tone: var(--tone-clay); }

.tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.08;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--tone, var(--tone-sand));
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.monogram {
  font: 600 clamp(2rem, 5vw, 3rem)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: rgba(27, 27, 34, 0.7);
}
.tile-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--label);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
}

/* Sheets: system-style modal surfaces. Glass is kept to their controls. */
.sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  max-height: min(88dvh, 880px);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--surface);
  color: var(--label);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
}
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: rgba(10, 12, 14, 0.4); }
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 4px 8px 0 20px;
}
.sheet-title { margin: 0; font: 600 17px/1.3 var(--font-ui); }
.grabber {
  width: 40px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--label) 30%, transparent);
}
@media (min-width: 720px) {
  .sheet { margin: auto; border-radius: var(--r-l); max-height: min(86dvh, 760px); }
  .grabber { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
  }
}

/* Feedback: a short glass message, never a blocking alert */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}