/* ---------------------------------------------------------------------------
   wwwroot/css/shared/global/01-tokens.css

   Loaded by _Layout.cshtml as part 1 of 17 for every page.
   Cascade order is the file order in that <link> list:
     previous: (first)
     next:     02-base.css

   Split out of a single monolithic stylesheet. Do not reorder the <link>
   tags and do not move a rule between these files: both change the cascade.
--------------------------------------------------------------------------- */
/* ==========================================================================
   MMRP GLOBAL STYLESHEET
   --------------------------------------------------------------------------
   The ONLY stylesheet loaded on every page (via _Layout.cshtml).
   Every page then loads exactly ONE page stylesheet from /css/pages/.

   Rules:
     1. Design tokens are defined here and ONLY here.
     2. Anything shared by two or more pages belongs here.
     3. Page stylesheets must never redefine tokens, reset, or chrome.

   Layer order below intentionally mirrors the original load order
   (site -> layout -> overrides -> partials -> dashboard -> page) so that
   no existing rule changes precedence.
   ========================================================================== */


/* ==========================================================================
   LAYER 1 - DESIGN TOKENS
   Consolidated from the former site.css (two :root blocks), dashboard.css and
   shared/layout.css, which each defined competing values.
   ========================================================================== */
:root,
[data-bs-theme=light] {
    /* --------------------------------------------------------------------
       Official Milliman palette. These twelve values and their names are the
       brand set - the same list drives the Plotly templates used in reporting,
       so a chart in the app and a chart in an article match exactly.
       Lava is reserved for negatives; do not use it as a series colour.
       -------------------------------------------------------------------- */
    --mil-ocean: #306DCA;
    --mil-sky: #63B4FC;
    --mil-spring: #76B459;
    --mil-sun: #F5C02B;
    --mil-orange: #EF5C1E;
    --mil-turquoise: #388C92;
    --mil-gold: #F09622;
    --mil-emerald: #3B9959;
    --mil-spruce: #245F3B;
    --mil-sandstone: #F6BB80;
    --mil-earth: #60341B;
    --mil-lava: #AA2327;
    /* Brand neutrals */
    --mil-obsidian: #222B36;
    --mil-cloud: #F4F4F4;
    /* Brand */
    --c-brand: var(--mil-obsidian);
    --c-brand-mid: #33404F; /* derived lighter Obsidian, for the header gradient */
    --c-accent: var(--mil-ocean);
    --c-accent-lt: #dbeafe;
    /* Surfaces */
    --c-bg: #F1F1F1;
    --c-surface: #ffffff;
    --c-surface-2: var(--mil-cloud);
    /* Borders */
    --c-border: #dde1e8;
    --c-border-2: #c8cdd8;
    /* Text */
    --c-text-primary: var(--mil-obsidian);
    --c-text-secondary: #4b5563;
    --c-text-muted: #9ca3af;
    /* Data / status */
    --c-fannie: var(--mil-ocean);
    --c-freddie: var(--mil-sky);
    --c-total: var(--mil-obsidian);
    --c-positive: var(--mil-spring);
    --c-negative: var(--mil-lava);
    --c-stable: var(--mil-spring);
    --c-stable-bg: #dcfce7;
    --c-improving: var(--mil-ocean);
    --c-improving-bg: #dbeafe;
    --c-caution: var(--mil-orange);
    --c-caution-bg: #ffedd5;
    /* Shape */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.04);
    /* Type */
    --font-sans: 'Benton Sans', BentonSans, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    /* Motion */
    --t: 150ms cubic-bezier(.4,0,.2,1);
    /* Chrome metrics */
    --navbar-height: 4.5rem;
    --footer-height: 20px;
    /* Form controls */
    --ctrl-h: 48px;
    --ctrl-border: #727983;
    --ctrl-text: #2d3440;
    --ctrl-bg: #ffffff;
    --ctrl-border-w: 2px;
}