/*
 * DCS Components — design tokens (redesign Phase 1).
 *
 * The single vocabulary every later phase styles with. Exactly EIGHT colour
 * tokens — the old stylesheet grew 65 distinct hex values because nothing
 * named the palette; anything not expressible in these eight is a design
 * decision to raise, not a ninth colour to sneak in.
 *
 * Every foreground/background pairing below was verified >= 4.5:1 (WCAG AA,
 * normal text) at token level on 2026-08-10:
 *
 *   text/ink 18.09   text/surface 16.41   muted/ink 9.62   muted/surface 8.73
 *   white/accent 5.17   accent-text/ink 8.17   ok-text/ink 11.48   ink/white 20.01
 *
 * These tokens codify the CURRENT dark identity. If DECISIONS #1 lands on
 * light catalogue surfaces, the values change here, once — pages that consume
 * tokens follow automatically.
 *
 * Loaded AFTER storefront.css: definitions cascade-free, but the body
 * font-family override at the bottom must win.
 */

:root {
    /* ---- colour (8) ---------------------------------------------------- */
    --ink: #020817;            /* page background */
    --surface: #0b1626;        /* panels, cards */
    --line: #24344d;           /* borders, dividers */
    --text: #edf4ff;           /* primary text on dark */
    --muted: #9fb6d2;          /* secondary text on dark */
    --accent: #2563eb;         /* actions; white text on this passes AA */
    --accent-text: #63a8ff;    /* links / accent-coloured text on dark */
    --ok: #4ade80;             /* positive state text (stock, success) */

    /* ---- light catalogue surfaces (DECISIONS #1) ------------------------ */
    --paper: #f5f7fb;          /* light section background */
    --card: #ffffff;           /* product cards, panels on light */
    --paper-line: #dfe6f0;     /* borders on light (non-text) */
    --muted-ink: #51617a;      /* secondary text on light */
    --ok-ink: #15803d;         /* positive state text on light */
    /* Admin state inks (redesign Phase 6/A) — the plan's status pills need a
       warn/danger vocabulary the storefront never did. Verified AA on --card
       and --paper 2026-08-11: warn-ink/card 6.4, warn-ink/paper 5.8,
       danger-ink/card 5.9, danger-ink/paper 5.4. */
    --warn-ink: #92400e;       /* caution state text on light */
    --danger-ink: #b91c1c;     /* destructive/critical state text on light */
    /* Dark-surface state pair (admin dark mode, 2026-08-11). AA verified:
       warn/ink 11.1, warn/surface 10.1, danger/ink 8.0, danger/surface 7.3. */
    --warn: #fbbf24;           /* caution state text on dark */
    --danger: #f87171;         /* destructive/critical state text on dark */

    /* ---- typography ---------------------------------------------------- */
    --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* modular scale, 1.25 ratio on a 16px base */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;
    --text-4xl: 3.052rem;

    --leading-tight: 1.15;
    --leading-body: 1.6;

    /* ---- shape & elevation --------------------------------------------- */
    --radius-card: 18px;
    --radius-control: 10px;
    --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35);

    /* ---- spacing rhythm ------------------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;
}

/*
 * Breakpoints (CSS custom properties cannot parameterise media queries —
 * these values are the canon; use them literally and cite this file):
 *
 *   narrow  : max-width 560px   (single column)
 *   mid     : max-width 980px   (two columns collapse)
 *   wide    : min-width 1300px  (four-column grids)
 */

/*
 * Figtree site-wide. The storefront ran on system fonts while the contact
 * page loaded Figtree — the one typeface the site had chosen. This override
 * (after storefront.css in the cascade) unifies on it; the fallback stack
 * matches the old system stack, so unloaded-font rendering is unchanged.
 */
body {
    font-family: var(--font-sans);
}