:root {
    --color-surface: #FFFFFF;
    --color-surface-short: #fff;
    --color-background: #F5F7FA;
    --color-surface-alt: #F0F3F8;
    --color-surface-alt-2: #EAF0F6;
    --color-text-primary: #1E293B;
    --color-text-secondary: #475569;
    --color-text-disabled: #A0AEC0;
    --color-border: #DDE4ED;
    --color-border-light: #E8EDF4;
    --color-brand-primary: #0A1628;
    --color-brand-secondary: #1A6FB5;
    --color-accent: #2A9D8F;
    --color-brand-gold: #B8944A;
    --color-brand-primary-light: #152A4A;
    --color-brand-primary-dark: #0E2240;
    --color-brand-primary-darker: #060E1A;
    --color-black: #000000;
    --color-black-short: #000;
    --color-dark-gray: #222;
    --color-mid-gray: #666;
    --color-light-gray: #ccc;
    --color-brand-primary-alpha-4: rgba(10,22,40,0.04);
    --color-brand-primary-alpha-6: rgba(10,22,40,0.06);
    --color-brand-primary-alpha-8: rgba(10,22,40,0.08);
    --color-brand-primary-alpha-10: rgba(10,22,40,0.1);
    --color-brand-primary-alpha-15: rgba(10,22,40,0.15);
    --color-brand-primary-alpha-20: rgba(10,22,40,0.2);
    --color-brand-primary-alpha-80: rgba(10,22,40,0.8);
    --color-surface-alpha-92: rgba(255,255,255,0.92);
    --color-surface-alpha-8: rgba(255,255,255,0.08);
    --color-surface-alpha-60: rgba(255, 255, 255, 0.6);
    --color-surface-alpha-85: rgba(255, 255, 255, 0.85);
    --color-surface-alpha-75: rgba(255, 255, 255, 0.75);
    --color-surface-alpha-65: rgba(255, 255, 255, 0.65);
    --color-surface-alpha-70: rgba(255, 255, 255, 0.7);
    --color-surface-alpha-10: rgba(255, 255, 255, 0.1);
    --color-black-alpha-2: rgba(0,0,0,0.02);
    --color-black-alpha-8: rgba(0,0,0,0.08);
    --color-black-alpha-20: rgba(0,0,0,0.2);
    --color-black-alpha-5: rgba(0,0,0,0.05);
    --color-black-alpha-10: rgba(0,0,0,0.1);
    --color-black-alpha-15: rgba(0,0,0,0.15);
    --color-black-alpha-10-spaced: rgba(0, 0, 0, 0.1);

    /* ----------------------------------------------------------
       INVERTED BRAND SURFACE
       Deliberately dark panels (page headers, trust bar, footer,
       tooltips). These are surfaces, not foreground — they must NOT
       follow --color-brand-primary, which flips to a light value in
       the dark theme so headings/logo stay legible.
       ---------------------------------------------------------- */
    --color-brand-surface: #0A1628;
    --color-brand-surface-2: #0E2240;
    --color-brand-surface-3: #060E1A;
    --color-brand-surface-a80: rgba(10, 22, 40, 0.8);

    /* Foreground on the inverted brand surface. White family in BOTH
       themes — the surface underneath stays dark either way. */
    --color-on-brand: #FFFFFF;
    --color-on-brand-85: rgba(255, 255, 255, 0.85);
    --color-on-brand-75: rgba(255, 255, 255, 0.75);
    --color-on-brand-70: rgba(255, 255, 255, 0.7);
    --color-on-brand-65: rgba(255, 255, 255, 0.65);
    --color-on-brand-60: rgba(255, 255, 255, 0.6);
    --color-on-brand-10: rgba(255, 255, 255, 0.1);
    --color-on-brand-08: rgba(255, 255, 255, 0.08);

    /* Solid primary action (primary button fill + its label) */
    --color-action: #0A1628;
    --color-action-hover: #152A4A;
    --color-on-action: #FFFFFF;

    /* Label on saturated accent / gold fills */
    --color-on-accent: #FFFFFF;

    /* Label on fixed bright decorative colours (career timeline arrows).
       Those colours are theme-invariant, so this must not flip either. */
    --color-on-bright: #222222;

    /* Recessed image well */
    --color-well: rgba(0, 0, 0, 0.02);

    /* Standalone hairline divider. Deliberately not part of the
       --color-border alias chain (see note in style.css :root). */
    --color-hairline: rgba(0, 0, 0, 0.08);

    /* Section accent green (group.html collaboration heading) */
    --color-brand-green: #2E6F40;
}