:root{
    /* Typography */
    --font-sans: "Segoe UI", Roboto, -apple-system, Arial, sans-serif;

    /* Brand */
    --color-primary:              #1B4CA1;
    --color-primary-dark:         #16407F;  /* primary hover / pressed */
    --color-primary-container:    #E8EEFB;
    --color-on-primary:           #FFFFFF;
    --color-on-primary-container: #12377E;

    /* Navy — saturated brand mass (appbar) */
    --color-navy:                 #12377E;
    --color-on-navy:              #FFFFFF;
    --color-on-navy-muted:        rgba(255, 255, 255, .88);
    --color-on-navy-hover:        rgba(255, 255, 255, .14);
    --color-on-navy-fill:         rgba(255, 255, 255, .18);
    --color-on-navy-divider:      rgba(255, 255, 255, .28);

    /* Danger */
    --color-danger:               #C02A2A;
    --color-danger-bg:            #FBE3E3;
    --color-on-danger:            #FFFFFF;

    /* Surfaces */
    --color-bg:                   #EAF0F9;  /* deeper than the cards so they separate */
    --color-surface:              #FFFFFF;
    --color-surface-high:         #EEF1F6;  /* neutral hover/tag level — distinct from primary-container */
    --color-outline:              #E3E9F2;  /* decorative hairline; separation comes from --shadow-card */
    --color-outline-strong:       #8A97AC;  /* interactive boundaries — WCAG 1.4.11 needs 3:1 */

    /* Text */
    --color-text:                 #2B3A55;
    --color-text-muted:           #5A6B86;

    /* Alerts */
    --color-success-bg:           #E3F4EC;
    --color-success-text:         #1B7A4E;
    --color-error-bg:             #FBE3E3;
    --color-error-text:           #B02525;

    /* Sidebar */
    --color-sidebar-active-bg:    #1B4CA1;
    --color-sidebar-active-text:  #FFFFFF;

    /* Status badges — solid fill, white text, all measured >= 5:1 */
    --status-pending-bg:          #5A6B86;   /* 5.41:1 */
    --status-pending-text:        #FFFFFF;
    --status-follow-up-bg:        #2F4FA8;   /* 7.49:1 */
    --status-follow-up-text:      #FFFFFF;
    --status-rejected-bg:         #B02525;   /* 6.20:1 */
    --status-rejected-text:       #FFFFFF;
    --status-duplicate-bg:        #6B2F96;   /* 8.50:1 */
    --status-duplicate-text:      #FFFFFF;
    --status-in-progress-bg:      #A85A16;   /* 5.08:1 */
    --status-in-progress-text:    #FFFFFF;
    --status-implemented-bg:      #1B7A4E;   /* 5.33:1 */
    --status-implemented-text:    #FFFFFF;

    /* Category accents — tint + text, cycled by id (id % 5 + 1) */
    --cat-1-bg: #E8EEFB;  --cat-1-text: #2F4FA8;
    --cat-2-bg: #E3F4EC;  --cat-2-text: #1B7A4E;
    --cat-3-bg: #FCECDF;  --cat-3-text: #A85A16;
    --cat-4-bg: #EFE6F7;  --cat-4-text: #6B2F96;
    --cat-5-bg: #E0F3F6;  --cat-5-text: #10707F;

    /* Elevation */
    --shadow-card:       0 2px 14px rgba(24, 54, 110, .07);
    --shadow-card-hover: 0 4px 20px rgba(24, 54, 110, .12);
    --shadow-appbar:     0 1px 12px rgba(18, 55, 126, .22);
    --shadow-fab:        0 4px 14px rgba(27, 76, 161, .40);

    /* Shape */
    --radius:      20px;   /* cards, sidebar, tables */
    --radius-md:   16px;   /* dropzone */
    --radius-sm:   14px;   /* inputs, alerts, fab */
    --radius-xs:   10px;   /* file rows */
    --radius-pill: 100px;  /* buttons, chips, tags, badges, nav items */

    /* Metrics */
    --appbar-h:    65px;   /* 14px padding * 2 + 36px avatar + 1px border */
    --gutter:      24px;
    --sidebar-w:   260px;
    --layout-max:  1280px;
}