:root {
    /* ----------------------------------------------------------------
       BRAND — indigo
       ---------------------------------------------------------------- */
    --primary: #1E3A8A; /* buttons, active nav, headings */
    --primary-dark: #152A63; /* hover / pressed */
    --primary-light: #3B5BDB; /* links, focus ring, secondary */

    --accent: #A5B4FC; /* thin chrome, avatar, stripes */
    --accent-light: #EEF2FF; /* icon tiles, hover wash */
    /* ----------------------------------------------------------------
       SURFACES & TEXT
       ---------------------------------------------------------------- */
    --background: #F5F7FB;
    --white: #FFFFFF;
    --surface: #FFFFFF;
    --text-dark: #1E293B;
    --text-muted: #64748B;
    --border: #E2E8F0;
    /* ----------------------------------------------------------------
       SEMANTIC — status only, never brand
       ---------------------------------------------------------------- */
    --danger: #DC3545;
    --warning: #D97706;
    --success: #15803D;
    --info: #0EA5E9;
    /* Semantic tints — badge backgrounds, notice panels */
    --danger-light: #FDECEC;
    --warning-light: #FEF4E6;
    --success-light: #E9F7EF;
    --info-light: #E0F2FE;
    --warning-dark: #8A5A0B; /* readable warning text on --warning-light */
    --danger-dark: #B02A37; /* readable danger text on --danger-light */
    --info-dark: #0C5460; /* readable info text on --info-light */
    --success-dark: #0F5132; /* readable success text on --success-light */
    /* ----------------------------------------------------------------
       DERIVED HELPERS
       RGB channels let any alpha level be built from a brand token,
       e.g. box-shadow: 0 8px 20px rgba(var(--primary-rgb), .18);
       ---------------------------------------------------------------- */
    --primary-rgb: 30, 58, 138;
    --primary-light-rgb: 59, 91, 219;
    --accent-rgb: 165, 180, 252;
    --danger-rgb: 220, 53, 69;
    --warning-rgb: 217, 119, 6;
    --success-rgb: 21, 128, 61;
    --info-rgb: 14, 165, 233;
    --accent-glow: rgba(59, 91, 219, .20); /* focus ring */
    /* ----------------------------------------------------------------
        SURFACES & TEXT — extended
        ---------------------------------------------------------------- */
    --text-soft: #8C98A4; /* tertiary / soft text (table hints, muted labels) */
    /* ----------------------------------------------------------------
        SHADOWS
        ---------------------------------------------------------------- */
    --shadow-sm: 0 2px 6px rgba(0,0,0,.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,.05);
    --shadow-lg: 0 10px 30px rgba(var(--primary-rgb),.12);
    /* ----------------------------------------------------------------
        RADIUS
        ---------------------------------------------------------------- */
    --radius: 12px;
    --radius-sm: 8px;
    /* ----------------------------------------------------------------
       SIDEBAR — dark indigo rail
       Starts at --primary and sinks to --primary-dark.
       ---------------------------------------------------------------- */
    --sidebar-bg: linear-gradient( 180deg, var(--primary) 0%, #1B3480 55%, var(--primary-dark) 100% );
    --sidebar-border: rgba(var(--accent-rgb), .25); /* footer card edge */
    --sidebar-glow: rgba(var(--accent-rgb), .28); /* active dot halo */
}