:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --color-brand: #203f68;
    --color-brand-hover: rgba(32, 63, 104, 0.08);
    --color-brand-active: rgba(32, 63, 104, 0.18);
    --color-brand-light: rgb(231, 240, 244);   /* e7f0f4 — used in .btn--light, .header bg */

    /* ── Text ──────────────────────────────────────────────── */
    --color-text-primary: rgb(59, 59, 59);
    --color-text-subtitle: rgb(127, 126, 131);
    --color-text-muted: rgba(0, 0, 0, 0.5);

    /* ── Semantic UI ───────────────────────────────────────── */
    --color-error: #ef4444;                    /* red-500 */
    --color-success: #3DDF77;                  /* MEL auto/green */
    --color-warning: rgb(246, 159, 58);        /* heat/orange */
    --color-cool: rgb(67, 148, 247);           /* cool/blue */
    --color-dry: rgb(2, 177, 164);             /* dry/teal */

    /* ── MEL Gradients ─────────────────────────────────────── */
    --color-mel-purple-start: #AE2AF0;
    --color-mel-purple-end: #D47AFA;
    --color-mel-auto-start: #3DDF77;
    --color-mel-auto-end: #66FF9D;

    /* ── Neutrals ──────────────────────────────────────────── */
    --color-surface: #ffffff;
    --color-background: #F9F9FB;
    --color-border: #e5e7eb;
    --color-icon-muted: #adb6c3;
    --color-icon-dark: rgb(80, 80, 84);
    --color-disabled: rgb(173, 182, 195);

    /* ── Sizing ────────────────────────────────────────────── */
    --size-touch-target: 44px;                 /* minimum tap/click target */
    --radius-pill: 9999px;
    --radius-card: 0.5rem;
}