/* ============================================================================
   BrightSparx design tokens — Phase 04

   The four brand colours are unchanged from V1 (decision D7). They are declared
   here ONCE and everything else references a token. What changed is distribution:

     navy   structures  — sidebar, headers, headings, dark surfaces
     blue   interacts   — links, selected state, focus rings, data
     gold   signals     — deadlines, current step, needs-you. Rationed on purpose.
     coral  commits     — the one primary action per screen, plus destructive

   In V1 gold was the hover state on every nav link, coral was every primary
   button, and blue filled the whole header. Three loud colours at full
   saturation on one screen is why the app read as unfinished.
   ============================================================================ */

:root {
    /* --- brand, the only place these hexes appear ------------------------- */
    --brand-navy: #0F1342;
    --brand-blue: #2D7DD2;
    --brand-gold: #F7C948;
    --brand-coral: #E94F4A;

    /* --- navy ramp, for sidebar depth ------------------------------------- */
    --navy-900: #0A0D2E;
    --navy-800: var(--brand-navy);
    --navy-700: #1A2059;
    --navy-600: #262E70;

    /* --- blue ramp --------------------------------------------------------- */
    --blue-700: #1B5FA8;
    --blue-600: var(--brand-blue);
    --blue-100: #E7F1FB;
    --blue-200: #B9D7F1;

    /* --- gold / coral supporting tints -------------------------------------- */
    --gold-600: #8A6410;
    --gold-500: var(--brand-gold);
    --gold-100: #FDF4E0;
    --gold-200: #F0DBA4;

    --coral-700: #B03A2E;
    --coral-600: var(--brand-coral);
    --coral-100: #FDECEA;
    --coral-200: #F5C4BE;

    /* --- semantic status, deliberately separate from the accent ------------- */
    --ok-700: #15754D;
    --ok-600: #1E9E68;
    --ok-100: #E4F5ED;
    --ok-200: #B0E0CB;

    /* --- neutrals, biased very slightly toward the navy --------------------- */
    --page: #F4F5FA;
    --surface: #FFFFFF;
    --surface-sunken: #EEF0F7;
    --line: #E3E6F2;
    --line-strong: #C9CEE4;

    --ink: #0F1342;
    --ink-2: #3D456B;
    --ink-muted: #6B7290;
    --ink-on-dark: #FFFFFF;
    --ink-on-dark-muted: rgba(255, 255, 255, 0.62);

    /* --- type -------------------------------------------------------------- */
    --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

    --text-xs: 0.6875rem;   /* 11px — pill and meta text        */
    --text-sm: 0.8125rem;   /* 13px — table and secondary text  */
    --text-base: 0.875rem;  /* 14px — body and controls         */
    --text-md: 1rem;        /* 16px — emphasis                  */
    --text-lg: 1.125rem;    /* 18px — card titles               */
    --text-xl: 1.375rem;    /* 22px — page titles               */
    --text-2xl: 1.75rem;    /* 28px — stat figures              */

    --leading-tight: 1.25;
    --leading-normal: 1.55;
    --tracking-label: 0.1em;

    /* --- spacing, a 4px scale ---------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* --- shape and depth ---------------------------------------------------- */
    --radius-sm: 5px;
    --radius: 8px;
    --radius-lg: 11px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 19, 66, 0.06);
    --shadow: 0 1px 2px rgba(15, 19, 66, 0.06), 0 8px 24px -14px rgba(15, 19, 66, 0.28);
    --shadow-lg: 0 20px 50px -28px rgba(15, 19, 66, 0.55);

    /* --- layout ------------------------------------------------------------- */
    --sidebar-width: 224px;
    --topbar-height: 56px;

    --focus-ring: 0 0 0 3px rgba(45, 125, 210, 0.35);

    --transition: 160ms ease;
}

/* Respect a viewer who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}