/* =========================================================================
   Design tokens - the single source of truth for colour, space and type.

   Nothing else in the stylesheet may hardcode a colour, a radius, a shadow or
   a font size. If you need a value that is not here, add it here first.

   This replaces three competing :root blocks that had accumulated in
   style.css, where 24 tokens were each defined between two and six times and
   two whole generations were dead but still being shipped.

   Direction: "Dense Catalogue" (chosen at Gate 3). The store's main job is
   finding one item among 7,300, so the geometry is deliberately tight -
   small radii, a compact type scale, restrained shadows. Colour is carried
   over from the previous design, which worked; it is the spacing and type
   that get denser.
   ========================================================================= */

:root {
  /* ---- Colour: light ---------------------------------------------------
     Every text token is measured against the WORST background it can land on
     (--surface-2 #eef1f7), not just white, so none of them fail in a tinted
     panel. Run `npm run contrast` after changing any of these.

       token            on surface  on bg  on surface-2
       --ink                  15.6   14.5          13.8   AAA
       --ink-soft              8.0    7.5           7.1   AAA
       --ink-faint             5.7    5.3           5.0   AA
       --price                 6.1    5.7           5.4   AA
       --danger                5.4    5.1           4.8   AA
       --warning               5.9    5.5           5.2   AA
       --accent-strong         5.5    5.1           4.9   AA

     Text needs 4.5:1, UI edges and icons need 3:1. */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --surface-3: #e4e9f3;         /* pressed / active rows */

  --ink: #17233f;               /* primary text */
  --ink-soft: #43516a;          /* secondary text */
  --ink-faint: #596780;         /* meta, captions - still AA */

  --line: #e2e7f0;              /* hairlines - decorative, may be under 3:1 */
  --line-strong: #74829c;       /* input borders - 3.43:1 on the worst surface */

  --accent: #17233f;            /* primary buttons */
  --accent-ink: #ffffff;        /* text on --accent */
  --accent-strong: #3f5ed9;     /* links, focus, selected state */
  --accent-soft: #edf1ff;       /* tinted backgrounds */

  --price: #08704f;
  --price-soft: #e8f7f0;
  --danger: #bd3c3c;            /* darkened from #c54747, which failed on --surface-2 */
  --danger-soft: #fdeceb;
  --warning: #8a5a00;
  --warning-soft: #fdf3e0;

  --hero-bg: #17233f;
  --hero-ink: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --thumb-bg: #e9edf5;          /* placeholder behind a loading image */

  /* Legacy aliases. Older rules in style.css still reference these; keeping
     them here means there is still only one place a colour is decided. */
  --text: var(--ink);
  --muted: var(--ink-soft);

  /* ---- Shape -----------------------------------------------------------
     Dense layouts read as cluttered with large radii, so these are small.
     Was a single --radius: 18px used for everything. */
  --radius-sm: 6px;             /* chips, badges, small buttons */
  --radius: 10px;               /* cards, inputs, panels */
  --radius-lg: 14px;            /* modals, hero, lightbox */
  --radius-full: 999px;         /* pills, avatars */

  /* ---- Elevation -------------------------------------------------------
     Deliberately light. At this density heavy shadows fight the grid. */
  --shadow-sm: 0 1px 2px rgba(24, 40, 73, 0.06);
  --shadow: 0 2px 8px rgba(24, 40, 73, 0.08);
  --shadow-hover: 0 6px 18px rgba(24, 40, 73, 0.12);
  --shadow-lg: 0 16px 40px rgba(24, 40, 73, 0.18);

  /* ---- Space -----------------------------------------------------------
     4px base. Use these rather than arbitrary px so rhythm stays consistent. */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ---- Type ------------------------------------------------------------
     One family, six sizes. Sizes are rem so they honour the browser's font
     setting; line heights are unitless so they scale with the size. */
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;      /* 12px - badges, meta */
  --text-sm: 0.8125rem;    /* 13px - card titles, secondary */
  --text-base: 0.9375rem;  /* 15px - body */
  --text-lg: 1.125rem;     /* 18px - section headings */
  --text-xl: 1.5rem;       /* 24px - page titles */
  --text-2xl: 2rem;        /* 32px - hero */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;   /* large headings only */
  --tracking-normal: 0;
  --tracking-wide: 0.06em;     /* small caps labels */

  /* ---- Layout ----------------------------------------------------------
     --card-min drives the product grid via repeat(auto-fill, minmax(...)).
     150px gives two columns at 360px with the gutters below, which is the
     density this direction is built around. */
  --card-min: 150px;
  --grid-gap: var(--space-3);
  --page-max: 1440px;
  --page-pad: var(--space-4);

  /* ---- Motion ----------------------------------------------------------
     Short, because these fire constantly while scrolling a long grid. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 180ms;

  /* ---- Focus -----------------------------------------------------------
     One visible focus ring everywhere. Never remove it without replacing it. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-strong);
}

/* =========================================================================
   Dark theme. Set by the inline script in index.html before first paint, so
   there is no flash, and toggled by the header button.

       token            on surface  on bg  on surface-2
       --ink                  15.3   16.8          13.7   AAA
       --ink-soft             10.4   11.5           9.3   AAA
       --ink-faint             8.2    9.1           7.4   AAA
       --price                10.3   11.3           9.2   AAA
       --danger                6.9    7.6           6.2   AA
       --warning               9.9   10.9           8.9   AAA
       --accent-strong         7.9    8.7           7.0   AAA
   ========================================================================= */
:root[data-theme="dark"] {
  /* Tells the browser to render form controls and scrollbars dark too. */
  color-scheme: dark;

  --bg: #0d1424;
  --surface: #141e32;
  --surface-2: #1a2740;
  --surface-3: #22314f;

  --ink: #f1f5ff;
  --ink-soft: #c2cde3;
  --ink-faint: #a8b7d1;

  --line: #273653;              /* hairlines - decorative */
  --line-strong: #5d7599;       /* input borders - 3.54:1 (was #52698f at 2.99) */

  --accent: #f1f5ff;
  --accent-ink: #10182a;
  --accent-strong: #9caeff;
  --accent-soft: #1b2748;

  --price: #68e0b7;
  --price-soft: #122e2a;
  --danger: #f18a84;
  --danger-soft: #3a1d1c;
  --warning: #f0c070;
  --warning-soft: #3a2e14;

  --hero-bg: #24355a;
  --hero-ink: #f7faff;
  --topbar-bg: rgba(13, 20, 36, 0.92);
  --thumb-bg: #1b2941;

  /* Shadows need more opacity to register on a dark surface. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
}

/* Wider gutters and bigger cards once there is room for them. */
@media (min-width: 768px) {
  :root {
    --card-min: 190px;
    --grid-gap: var(--space-4);
    --page-pad: var(--space-5);
  }
}
@media (min-width: 1200px) {
  :root {
    --card-min: 210px;
    --page-pad: var(--space-6);
  }
}

/* Respect a system request for less movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}