/* ============================================================
   DESIGN TOKENS — the canonical layer
   ============================================================

   Every colour, size, duration and breakpoint the storefront and the admin
   use, declared once. Nothing below this file should write a raw hex value, a
   raw pixel size or a raw duration; it should name a token.

   THE LAYER ORDER IS LOAD-BEARING, AND IT IS THIS

     1. tokens.css      this file — the DECORATIVE brand values
     2. store.css       storefront layout and components
        textile.css     the four drawn motifs (its own token namespace)
        admin.css       admin layout
     3. a11y.css        LAST — the ACCESSIBLE variants

   a11y.css is last on purpose and must stay last. Phase 2 established that the
   brand's decorative colours do not all reach 4.5:1 against the surfaces they
   are used on, and the fix was not to change the brand — it was to keep two
   families and let the accessible one win for anything that carries text.
   `--clr-gold` is `#B8882A` as a decorative fill and `#916B21` as text, and
   the second value is applied by a11y.css overriding the first.

   So a stylesheet loaded AFTER a11y.css that redeclares one of those tokens
   silently reverts the storefront to values that fail WCAG AA, and nothing
   would report it — the page renders, the colours look like the brand, and
   only a contrast check would notice. `test/contrast.test.js` now asserts the
   order and asserts that nothing after a11y.css redeclares a token it owns.

   WHY THIS FILE DOES NOT YET REPLACE THE DECLARATIONS IN store.css

   It is additive on purpose. store.css declares the same tokens and is loaded
   after this file, so the values here are defaults that store.css confirms.
   Moving the declarations out of store.css is a separate, mechanical change
   that has to be made with a computed-style parity check in front of it — see
   docs/PHASE6_BASELINE.md. What this file buys today is one place that STATES
   the contract, and a test that enforces the order the contract depends on.
*/

:root {
  /* ---------- colour: decorative brand ----------
     The values the brand is drawn in. a11y.css overrides the subset of these
     that text is ever painted with; do not "fix" the contrast here, because
     that would change the brand's fills as well as its text. */
  --clr-primary: #3D2B1F;      /* deep brown — the brand's structural colour */
  --clr-accent: #C4956E;       /* warm tan — decorative fills and rules */
  --clr-gold: #B8882A;         /* zari gold — decorative only */
  --clr-ink: #1A0F14;          /* body text */
  --clr-muted: #6F5A4A;        /* secondary text; already AA on cream */
  --clr-light-bg: #FFF8F0;     /* unbleached cotton, the page ground */
  --clr-surface: #FFFFFF;
  --clr-whatsapp: #25D366;     /* the brand's own green — decorative */

  /* ---------- typography ----------
     The stacks store.css already ships, verbatim. Lengthening a fallback chain
     here would be a change to how the page looks before the webfont arrives,
     dressed up as documentation — and tokens.css is additive today, so it
     would apply only where store.css is absent, which is the worst of both. */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', 'Segoe UI', sans-serif;

  /* ---------- spacing ----------
     A four-step scale. Anything between two steps is a decision to make in the
     component, not a new token. */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---------- radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ---------- focus ----------
     A focus ring must be visible as a RING, not as a colour change: Phase 2's
     browser test asserts that focus changes outline or box-shadow and not only
     `color`, because a colour-only indicator disappears for anyone who cannot
     distinguish the two colours. */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: #1A0F14;

  /* ---------- motion ----------
     Every one of these is suppressed under `prefers-reduced-motion` by a11y.css,
     except spinners, which have to keep moving or they stop meaning "waiting". */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- layout ----------
     `--header-height` is redeclared as 60px inside store.css's
     `@media (max-width: 768px)` block. That is the token doing its job — one
     name, a responsive value — not a duplicate, so it is not "fixed" here and
     there is deliberately no second `--header-height-mobile` name for the same
     idea. (A property-name scan flagged it as a contradiction; reading the
     media context is what told the difference.) */
  --header-height: 72px;
  --container-max: 1280px;
}

/* ---------- breakpoints ----------

   Custom properties cannot be used in a media query, so these exist as a
   STATED list rather than as tokens a rule can reference. They are the widths
   the browser gate measures at, so a layout that breaks between two of them
   breaks somewhere nothing is watching.

     360px   mobile-360   the narrowest supported phone
     390px   mobile-390
     768px   tablet-768
     1024px  desktop-1024
     1440px  desktop-1440

   The rules below are the only place the storefront should change layout, and
   a new breakpoint should be added to playwright.config.js at the same time or
   it is a width nobody tests. */