/* Buylow design tokens. The one place colours, type, spacing, radii, shadows and motion are defined.
   Both the storefront and the admin import this file. Values are from docs/design/REDESIGN-PROPOSAL.md §2.
   Dark mode swaps the neutral values only; every token keeps its name. */
:root {
  /* brand */
  --y-500: #FFD21A;
  --y-600: #F0BE00;
  --y-100: #FFF4C2;
  /* neutrals */
  --ink: #0F0E0C;
  --ink-2: #2A2824;
  --stone: #6F685E;
  --stone-2: #6B645A;
  --sand: #F6F2EA;
  --paper: #FFFFFF;
  --well: #F3EFE8;
  --line: #E9E3D9;
  --line-2: #D9D2C6;
  /* control outlines (inputs, buttons, switches): at least 3:1 against the surfaces they sit on */
  --control: #8A8377;
  /* meaning */
  --moss: #0F7D41;
  --moss-100: #DDF3E6;
  --clay: #B8372E;
  --clay-100: #F9E1DE;
  --sky: #1F5FBF;
  --sky-100: #DFE9FA;
  --on-y: #0F0E0C;
  --on-dark: #F4F1EC;
  /* footer: fixed dark colours in both themes */
  --ft-bg: #0F0E0C;
  --ft-text: #C9C3B9;
  --ft-muted: #9A938A;
  --ft-head: #FFFFFF;
  /* type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --t-display: clamp(40px, 6vw, 72px);
  --t-section: clamp(24px, 3vw, 34px);
  --t-title: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;
  /* spacing, 4-point scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  /* radius */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 18px;
  --r-4: 28px;
  --r-pill: 999px;
  /* elevation */
  --sh-1: 0 1px 2px rgba(15, 14, 12, .06);
  --sh-2: 0 6px 20px -8px rgba(15, 14, 12, .18);
  --sh-3: 0 24px 60px -24px rgba(15, 14, 12, .35);
  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  /* font weights: display 800, titles 700, labels 600 */
  --w-display: 800;
  --w-title: 700;
  --w-label: 600;
  --t-base: 220ms;
  /* layout */
  --wrap: 1200px;
  --gutter: 16px;
  --tap: 44px;
  --hd-h: 72px;
  --focus: var(--ink);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F4F1EC;
    --ink-2: #D8D3CA;
    --stone: #B3ACA2;
    --stone-2: #948E84;
  --control: #756E63;
    --sand: #141311;
    --paper: #1E1D1B;
    --well: #26241F;
    --line: #36332E;
    --line-2: #44403A;
    --y-100: #3A3210;
    --moss-100: #16331F;
    --clay-100: #3B1B18;
    --sky-100: #16263F;
    --on-dark: #F4F1EC;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 6px 20px -8px rgba(0, 0, 0, .6);
    --sh-3: 0 24px 60px -24px rgba(0, 0, 0, .8);
    --focus: var(--y-500);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #F4F1EC;
  --ink-2: #D8D3CA;
  --stone: #B3ACA2;
  --stone-2: #948E84;
  --control: #756E63;
  --sand: #141311;
  --paper: #1E1D1B;
  --well: #26241F;
  --line: #36332E;
  --line-2: #44403A;
  --y-100: #3A3210;
  --moss-100: #16331F;
  --clay-100: #3B1B18;
  --sky-100: #16263F;
  --on-dark: #F4F1EC;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 6px 20px -8px rgba(0, 0, 0, .6);
  --sh-3: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --focus: var(--y-500);
  color-scheme: dark;
}