/* Layerborn design tokens. Neutral, product-first. Edit colours here only. */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface2: #F4F3F0;
  --color-border: #E3E1DC;
  --color-border-strong: #1A1B1A;
  --color-text: #1A1B1A;
  --color-muted: #63665F;
  --color-accent: #1A1B1A;        /* primary buttons: near-black */
  --color-onAccent: #FFFFFF;
  --color-brand: #FF6A13;         /* logo orange: sale prices and the single highlight */
  --color-success: #2E6E3A;
  --color-warning: #8F5800;
  --color-danger: #B52A1C;
  --logo-top: #BDB8B3;
  --logo-base: #4A4A4C;
  --shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.16);
  color-scheme: light;

  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-wordmark: "Bricolage Grotesque", "Inter Tight", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --radius: 3px; --max-w: 1180px; --gutter: 24px; --control-h: 42px;

  --dur-quick: 120ms; --dur-base: 200ms; --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #131413; --color-surface: #131413; --color-surface2: #1D1F1D; --color-border: #2E312E; --color-border-strong: #ECEDE9;
    --color-text: #ECEDE9; --color-muted: #A2A59E; --color-accent: #ECEDE9; --color-onAccent: #131413; --color-brand: #FF7A2E;
    --color-success: #7FCB8B; --color-warning: #FFC72C; --color-danger: #FF6D5C;
    --logo-top: #E9E6E2; --logo-base: #8A8A8E; --shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #131413; --color-surface: #131413; --color-surface2: #1D1F1D; --color-border: #2E312E; --color-border-strong: #ECEDE9;
  --color-text: #ECEDE9; --color-muted: #A2A59E; --color-accent: #ECEDE9; --color-onAccent: #131413; --color-brand: #FF7A2E;
  --color-success: #7FCB8B; --color-warning: #FFC72C; --color-danger: #FF6D5C;
  --logo-top: #E9E6E2; --logo-base: #8A8A8E; --shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }
@media (max-width: 640px) { :root { --gutter: 16px; } }