/* =====================================================================
   _tokens.css — Design System Tokens (single source of truth)
   ---------------------------------------------------------------------
   Documented breakpoints, spacing, z-index and color scale for the app.
   This file is loaded FIRST so every other stylesheet can reference
   these custom properties via var(--token-name).

   Conventions:
     - Breakpoints: 640 / 1024 / 1440 (chosen Apr 2026 responsive pass).
       640  = phone / tablet boundary
       1024 = tablet portrait / desktop boundary
       1440 = desktop / wide-monitor boundary
     - Spacing scale is a 4px grid (--space-1 = 4px ... --space-8 = 32px).
     - Z-index uses semantic names — never use raw z-index numbers in
       new code; reference these tokens instead.
     - All new CSS should AVOID `!important`. The legacy override
       chains in static/css/_overrides.css and boq-overrides.css are
       documented bandaids that should be removed over time as we
       migrate components to use these tokens.
   ===================================================================== */

:root {
    /* ---------- Breakpoints (for reference in @media queries) ---------- */
    --bp-sm: 640px;
    --bp-md: 1024px;
    --bp-lg: 1440px;

    /* ---------- Spacing scale (4px grid) ---------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- Z-index scale ---------- */
    --z-base: 1;
    --z-sticky: 1000;     /* sticky toolbars, welcome-header */
    --z-nav: 1040;        /* split-tone nav */
    --z-dropdown: 1050;   /* default dropdown menus */
    --z-toolbar: 1020;    /* fixed page toolbars (BOQ, Catalog) */
    --z-modal-backdrop: 1950;
    --z-modal: 2000;
    --z-nav-dropdown: 5000; /* nav menu dropdowns must beat sticky bars */
    --z-toast: 20000;       /* toasts always on top */

    /* ---------- Brand color scale ---------- */
    --color-brand-50:  #fff8f0;
    --color-brand-100: #ffe8d6;
    --color-brand-300: #ff9d5c;
    --color-brand-500: #ff6600;
    --color-brand-600: #e55b00;
    --color-brand-700: #cc5200;
    --color-brand-800: #b84600;

    /* ---------- Accent (yellow used in BOQ rows) ----------
       Canonical yellow scale. Legacy hex literals map as follows
       (unified in task #29):
         #ebb012  -> --color-accent-500
         #d39e10  -> --color-accent-600
         #F5B301  -> --color-accent-700
         #FFB800  -> --color-accent-700  (collapsed; visually identical
                                          to #f5b301, diff <4% per channel)
       New code MUST reference these tokens instead of repeating hexes. */
    --color-accent-500: #ebb012;
    --color-accent-600: #d39e10;
    --color-accent-700: #f5b301;

    /* ---------- Neutral scale ---------- */
    --color-bg:         #ffffff;
    --color-bg-muted:   #f8f9fa;
    --color-border:     #dee2e6;
    --color-border-strong: #adb5bd;
    --color-text:       #212529;
    --color-text-muted: #6c757d;

    /* ---------- Row backgrounds (BOQ / catalog hierarchy) ---------- */
    --color-phase-bg: #474747;
    --color-cc-bg:    #707070;

    /* ---------- Radii ---------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;

    /* ---------- Motion ---------- */
    --motion-fast: 0.15s ease;
    --motion-base: 0.25s ease;
}

/* Honour reduced-motion preference globally. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0s;
        --motion-base: 0s;
    }
}