/* =====================================================
   NWCA DESIGN TOKENS — app-wide (CSS standardization Step 1, 2026-09-07)

   The ONE place for colour, type, space, radius, shadow, motion and
   z-index. Every page loads this file FIRST: it carries the @layer
   ORDER statement (reset → tokens → base → components → utilities →
   overrides), and the first order statement a browser meets wins, so it
   has to precede every layered rule. Legacy (unlayered) page stylesheets
   still override layered rules — linking this file changes nothing on a
   page until that page starts using the variables.

   Promoted from staff-dashboard/tokens.css (built 2026-05 on oklch + NW
   green). That file now holds ONLY what the Staff Dashboard adds on top:
   density, the dark/light theme surfaces, accent overrides and its
   semantic aliases. Dashboard load order: tokens.css → staff-dashboard/
   tokens.css → base → components → utilities → theme → patches.

   Two greens, on purpose, until the families migrate:
     --nw-*        the oklch ramp the dashboard was designed on
     --brand-*     the hex green the public pages were built on
                   (#4cb354 appeared 383 times before tokens)
   Colour = person/department on staff pages (memory/DESIGN_COLOUR_CODE.md):
   Steve green, Ruth purple, Bradley slate, shop-floor blue and AE maroon
   stay in their pages' own theme variables — they are NOT brand tokens.
   nwca-2026-core.css (the 2026 storefront system, 24 pages) aliases its
   --paper, --ink, --green-N and --rush names to the --store-* group below.

   The counts in the colour comments are how many times that hex appeared
   across the 295 stylesheets (scripts/css-census.py, 2026-09-07). When a
   page migrates, map each of its hexes to the nearest token here; a hex
   that is not close to anything is either one of the person/department
   colours above or a candidate for a new token (add it here with a
   comment — never in the page file: stylelint's color-no-hex rejects raw
   hex everywhere except the two token files).
   ===================================================== */

@layer reset, tokens, base, components, utilities, overrides;

@layer tokens {
    :root {
        /* Type families — the two stacks the app standardizes on
           (Inter 83 files, JetBrains Mono 135; Poppins is a per-page legacy) */
        --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

        /* Discrete type ramp (replaces ad-hoc rems) */
        --font-size-xs: 0.6875rem; /* 11px — eyebrow labels */
        --font-size-sm: 0.75rem; /* 12px — meta */
        --font-size-md: 0.875rem; /* 14px — body */
        --font-size-base: 1rem; /* 16px — default */
        --font-size-lg: 1.125rem; /* 18px — emphasized body */
        --font-size-xl: 1.25rem; /* 20px — page subtitle */
        --font-size-2xl: 1.5rem; /* 24px — section title */
        --font-size-display: 2.25rem; /* 36px — hero KPI numbers */

        /* Line heights */
        --line-height-tight: 1.1;
        --line-height-base: 1.5;
        --line-height-loose: 1.75;

        /* Weights */
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;

        /* NW green family (oklch) — the dashboard's single brand accent */
        --nw-50: oklch(96% 0.04 150deg);
        --nw-100: oklch(92% 0.07 150deg);
        --nw-300: oklch(78% 0.13 150deg);
        --nw-500: oklch(62% 0.16 150deg);
        --nw-600: oklch(54% 0.16 150deg);
        --nw-700: oklch(46% 0.14 150deg);
        --nw-900: oklch(28% 0.08 150deg);

        /* Brand green ramp (hex) — what the public pages already use */
        --brand-50: #f0fdf4; /* success wash (93) */
        --brand-100: #e8f5e9; /* selected rows, pale fills (92) */
        --brand-500: #4cb354; /* buttons, links, accents (383) */
        --brand-600: #409a47; /* :hover of --brand-500 (80) */
        --brand-700: #2e5827; /* header bands, active nav (146) */
        --brand-800: #1a472a; /* darkest — gradient ends, footers (116) */
        --brand-400: #5bc85f; /* lighter brand green — hover of light buttons, chips (11 sheets, palette pass 2026-09-07) */
        --brand-mid: #3a7c52; /* the house "mid" green between 600 and 700: 1a472a dark, 3a7c52 mid, 4cb354 light (20 sheets) */

        /* Neutral ramp — 9 of the 12 most-used colours were already this grey scale */
        --gray-50: #f9fafb; /* raised surfaces (117) */
        --gray-100: #f3f4f6; /* page floor, hover rows (188) */
        --gray-200: #e5e7eb; /* borders, dividers (385) */
        --gray-300: #d1d5db; /* input borders (221) */
        --gray-400: #9ca3af; /* placeholders, disabled text (152) */
        --gray-500: #6b7280; /* secondary text, labels (362) */
        --gray-600: #4b5563; /* strong secondary text (122) */
        --gray-700: #374151; /* headings on light (120) */
        --gray-800: #1f2937; /* body ink (192) */
        --gray-900: #111827; /* darkest ink — headlines on the SEO pages */

        /* Slate ramp — the dashboards' cooler neutral */
        --slate-50: #f8fafc; /* (95) */
        --slate-100: #f1f5f9; /* (106) */
        --slate-200: #e2e8f0; /* (156) */
        --slate-500: #64748b; /* (173) */
        --slate-600: #475569; /* (88) */

        /* Status ramps */
        --red-50: #fef2f2; /* (105) */
        --red-100: #fee2e2; /* (87) */
        --red-600: #dc2626; /* danger (208) */
        --red-700: #b91c1c; /* (88) */
        --red-800: #991b1b; /* danger ink (94) */
        --amber-100: #fef3c7; /* warning background (173) */
        --amber-500: #f59e0b; /* warning (174) */
        --amber-600: #d97706; /* (128) */
        --amber-700: #b45309; /* (81) */
        --amber-800: #92400e; /* warning ink (177) */
        --emerald-600: #059669; /* success (105) */
        --blue-600: #2563eb; /* info; also the shop-floor family (86) */
        --sky-100: #e0f2fe; /* info banner background */
        --sky-700: #0369a1; /* info banner border */
        --sky-900: #0c4a6e; /* info banner text */

        /* Ramp steps the pages already shared (palette pass 2026-09-07): each of these hexes was declared as a
           page-scoped variable in 8 to 35 sheets. Naming them once collapsed those variables with no visual change.
           Tailwind names where the value is a Tailwind step; the legacy Bootstrap 4 and Material greens are named
           for what they are so a redesign can retire them on purpose. */
        --red-200: #fecaca; /* (30 sheets) */
        --red-300: #fca5a5; /* (21) */
        --red-500: #ef4444; /* (31) */
        --amber-200: #fde68a; /* (29) */
        --amber-300: #fcd34d; /* (22) */
        --amber-400: #fbbf24; /* (21) */
        --amber-900: #78350f; /* (28) */
        --orange-200: #fed7aa; /* (10) */
        --green-200: #bbf7d0; /* (19) */
        --green-300: #86efac; /* (17) */
        --green-500: #22c55e; /* (19) */
        --green-600: #16a34a; /* (25) */
        --green-700: #15803d; /* (20) */
        --emerald-100: #d1fae5; /* (33) */
        --emerald-200: #a7f3d0; /* (9) */
        --emerald-500: #10b981; /* (18) */
        --emerald-700: #047857; /* (12) */
        --emerald-800: #065f46; /* (35) */
        --blue-200: #bfdbfe; /* (14) */
        --blue-800: #1e40af; /* (29) */
        --violet-600: #7c3aed; /* (15) */
        --indigo-700: #4338ca; /* (9) */
        --bs-danger: #dc3545; /* legacy Bootstrap 4 danger (27) */
        --bs-success: #28a745; /* legacy Bootstrap 4 success (16) */
        --bs-warning: #ffc107; /* legacy Bootstrap 4 warning (21) */
        --bs-warning-ink: #856404; /* legacy Bootstrap 4 warning text (21) */
        --material-green-100: #c8e6c9; /* legacy Material green 100 (12) */
        --material-green-900: #1b5e20; /* legacy Material green 900 (8) */

        /* Print collateral — the fillable forms (pages/forms/) are printed at the counter and their
           colours were sampled from the official PDF forms (nwca-form-shared.css, 2026-07-11). A screen
           nudge would print differently, so these stay exact. Use ONLY on printed sheets. */
        --print-green: #256a42; /* form green: toolbar, section bars, accents (absorbs #2e6f40, d=9) */
        --print-green-dark: #1c5233; /* headings, dark accents (absorbs #1f4d2c) */
        --print-ink: #1a1a1a; /* body ink on paper (absorbs the stray #333 / #000 inks) */
        --print-ink-soft: #555; /* labels, hints (absorbs #4a4a4a, #666) */
        --print-line: #9aa5a0; /* fill lines, borders */
        --print-red: #7a1c16; /* waiver / urgent text (absorbs #7f1d1d) */
        --print-gold: #8a6d1a; /* PCI / tax-certificate notices */

        /* People & departments — colour = the PERSON or DEPARTMENT a page belongs to, never the page
           type (Erik, 2026-09-04; memory/DESIGN_COLOUR_CODE.md is the key). Values equal the ones the
           pages define today (workspaces.css --f-*, ae-nav-v2.css, art-hub-steve, mockup-submit-form);
           each family migrates by aliasing its own variable to these. Never "tidy" two of them into one. */
        --color-steve: #0a8a1f; /* Steve, graphic arts: Art Queue, Design Queue, art requests */
        --color-steve-dark: #060;
        --color-steve-light: #3b3;
        --color-steve-tint: #ecfdf0;
        --color-ruth: #6b46c1; /* Ruth, digitizing: Mockup Queue, mockup detail */
        --color-ruth-dark: #4c3391;
        --color-ruth-light: #8b5cf6;
        --color-ruth-tint: #f5f3ff;
        --color-bradley: #4a6fa5; /* Bradley, purchasing + transfers */
        --color-bradley-dark: #33537d;
        --color-bradley-tint: #f4f7fb;
        --color-floor: #2563eb; /* personalization / shop floor: Names & Numbers, monogram, box labels */
        --color-floor-dark: #1d4ed8;
        --color-floor-light: #3b82f6;
        --color-floor-tint: #eff6ff;
        --color-ae: #981e32; /* the AE dashboard's own chrome (maroon) — the reps' container */
        --color-ae-dark: #7a1828;
        --color-ae-light: #b92c43;
        --color-dash-theme: #090; /* staff sub-page chrome: dash-shell.css --dash-theme (Training Center, hubs) */
        --color-dash-theme-dark: #060;
        --color-dash-theme-bg: #f0f9f0;

        /* Storefront 2026 — the customer-facing design language (nwca-2026-core.css: homepage, catalog, product
           page, custom-* storefronts, 24 pages). Cream paper, forest greens, safety-orange rush accent, Bricolage
           Grotesque display type. nwca-2026-core.css aliases its own --paper, --ink, --green-N and --rush names to these. */
        --store-paper: #faf8f3; /* page ground */
        --store-paper-deep: #f1ede3; /* bands, wells */
        --store-ink: #182219; /* text */
        --store-ink-soft: #41514a; /* meaningful small text */
        --store-ink-faint: #75847c; /* decorative / disabled ONLY (fails AA) */
        --store-line: #e4dfd2;
        --store-line-strong: #cfc8b6;
        --store-green-950: #122b18;
        --store-green-900: #1b4424;
        --store-green-700: #2f7d3b; /* buttons, links, --ok */
        --store-green-600: #38934a;
        --store-green-100: #e3f1e4;
        --store-green-50: #f0f7f0;
        --store-rush: #e8590c; /* safety orange "rush tag" */
        --store-rush-deep: #c2410c;
        --store-rush-deeper: #9a3412; /* hover step for white-on-orange (AA) */
        --store-rush-soft: #fff1e6;
        --store-green-300: #7ed08c; /* storefront accent green — home hero + fall catalog (palette pass 2) */
        --store-green-200: #9be3a8; /* pale accent green — custom tees, caps, 3-day tees tags */
        --store-rush-tint: #ffd9a8; /* peach rush tint — the same three pages */
        --font-store-display: "Bricolage Grotesque", "Public Sans", sans-serif;
        --font-store-body: "Public Sans", system-ui, sans-serif;

        /* Semantic colour — what page rules should reference */
        --color-brand: var(--brand-500);
        --color-brand-hover: var(--brand-600);
        --color-brand-dark: var(--brand-700);
        --color-brand-deep: var(--brand-800);
        --color-brand-tint: var(--brand-100);
        --color-on-brand: #fff; /* text on a brand-coloured surface (256 uses of white) */
        --color-ink: var(--gray-800);
        --color-ink-soft: var(--gray-700);
        --color-muted: var(--gray-500);
        --color-faint: var(--gray-400);
        --color-line: var(--gray-200);
        --color-line-strong: var(--gray-300);
        --color-surface: #fff;
        --color-surface-alt: var(--gray-100);
        --color-surface-raised: var(--gray-50);
        --color-danger: var(--red-600);
        --color-danger-ink: var(--red-800);
        --color-danger-bg: var(--red-50);
        --color-warning: var(--amber-500);
        --color-warning-ink: var(--amber-800);
        --color-warning-bg: var(--amber-100);
        --color-success: var(--emerald-600);
        --color-success-bg: var(--brand-50);
        --color-info: var(--blue-600);
        --color-info-bg: var(--sky-100);
        --color-info-line: var(--sky-700);
        --color-info-ink: var(--sky-900);

        /* Space scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px) */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;
        --space-8: 64px;
        --space-9: 96px;

        /* Radius */
        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 14px;
        --radius-xl: 20px;
        --radius-pill: 999px;
        --radius-card: var(--radius-md); /* semantic alias */

        /* Shadows for light surfaces (the dashboard themes define --shadow-1..3 per theme) */
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);

        /* Motion */
        --motion-fast: 120ms;
        --motion-base: 200ms;
        --motion-slow: 320ms;
        --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

        /* Z-index scale */
        --z-base: 0;
        --z-sticky: 100;
        --z-nav: var(--z-sticky); /* sticky headers and nav bars */
        --z-overlay: 500;
        --z-modal: 1000;
        --z-toast: 2000;
        --z-fab: 9000;
    }
}