/* =============================================================
   DFCI.OncPro — Design Tokens
   Single source of truth for colour, type, spacing and elevation.
   Every component stylesheet consumes these; no raw hex anywhere
   else in the codebase.
   ============================================================= */

:root {
    /* ---------- Brand / chrome ---------- */
    --color-header-blue:      #1763AE;  /* app header bar                  */
    --color-subnav-blue:      #4A8CCB;  /* sub-navigation tab strip        */
    --color-subnav-hover:     #3F80BF;
    --color-page-bg:          #D7E4F5;  /* page canvas behind cards        */

    /* ---------- Action / accent ---------- */
    --color-action-primary:   #D0103A;  /* primary buttons, HCC mark       */
    --color-action-primary-h: #B20D31;  /* hover                           */

    /* ---------- Surfaces ---------- */
    --color-surface:          #FFFFFF;  /* cards, nav, footer              */
    --color-surface-alt:      #F5F8FC;  /* subtle inset panels             */
    --color-surface-active:   #E4EEF9;  /* active left-nav item            */

    /* ---------- Text ---------- */
    --color-heading:          #1763AE;  /* section headings                */
    --color-text:             #1F2933;  /* body copy                       */
    --color-text-muted:       #6B7280;  /* labels, meta, footer            */
    --color-text-on-brand:    #FFFFFF;
    --color-text-disabled:    #9AA5B1;

    /* ---------- Lines & fields ---------- */
    --color-border:           #D5DCE5;
    --color-border-strong:    #B8C4D2;
    --color-field-bg:         #FFFFFF;
    --color-focus-ring:       #2B7FD4;

    /* ---------- Status ---------- */
    --color-status-ok:        #17A34A;  /* Production dot                  */
    --color-status-warn:      #D97706;
    --color-status-info:      #1763AE;
    --color-favorite:         #B8860B;  /* gold star; about 3.3:1 on white, enough for a UI shape */

    /* ---------- Typography ---------- */
    --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;

    --weight-regular:  400;
    --weight-medium:   600;
    --weight-bold:     700;

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* ---------- Spacing scale (4px base) ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* ---------- Radii ---------- */
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-card:  10px;
    --radius-pill:  999px;

    /* ---------- Elevation ---------- */
    --shadow-card:  0 1px 3px rgba(16, 42, 75, 0.10);
    --shadow-raise: 0 4px 12px rgba(16, 42, 75, 0.14);

    /* ---------- Layout metrics ---------- */
    --leftnav-width:   264px;
    --header-height:   88px;
    --subnav-height:   46px;

    /* ---------- Motion ---------- */
    --transition-fast: 120ms ease-in-out;
}
