:root {
    /* ── Color tokens ────────────────────────────────── */
    --md-sys-color-primary:            #174080;
    --md-sys-color-primary-light:      #1a5fa0;
    --md-sys-color-primary-dark:       #102d5c;
    --md-sys-color-secondary:          #e57d19;
    --md-sys-color-tertiary:           #009b77;
    --md-sys-color-error:              #d64545;
    --md-sys-color-surface:            #ffffff;
    --md-sys-color-background:         #f0f2f5;
    --md-sys-color-on-primary:         #ffffff;
    --md-sys-color-on-surface:         #1e2a3a;
    --md-sys-color-on-surface-variant: #7b8a9a;
    --md-sys-color-outline:            #dde3ea;
    --md-sys-color-accent-blue:        #00bcd4;
    --md-sys-color-accent-purple:      #cc0084;
    --md-sys-color-snackbar:           #323232;

    /* ── RGB channels ────────────────────────────────── */
    --md-sys-color-primary-rgb:        23, 64, 128;
    --md-sys-color-secondary-rgb:      229, 125, 25;
    --md-sys-color-tertiary-rgb:       0, 155, 119;
    --md-sys-color-accent-blue-rgb:    0, 188, 212;

    /* ── Elevation tokens ────────────────────────────── */
    --md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, .08),
                          0 1px 2px rgba(0, 0, 0, .06);
    --md-sys-elevation-2: 0 4px 6px rgba(0, 0, 0, .07),
                          0 2px 4px rgba(0, 0, 0, .06);
    --md-sys-elevation-3: 0 10px 20px rgba(0, 0, 0, .08),
                          0 3px 6px rgba(0, 0, 0, .05);

    /* ── Shape tokens ────────────────────────────────── */
    --md-sys-shape-medium: 12px;
    --md-sys-shape-small:  8px;
    --md-sys-shape-full:   9999px;

    /* ── Motion tokens ───────────────────────────────── */
    --md-sys-motion-standard: .2s cubic-bezier(.4, 0, .2, 1);
    --md-sys-motion-emphasized: .3s cubic-bezier(.4, 0, .2, 1);

    /* ── Layout tokens ───────────────────────────────── */
    --md-sys-layout-appbar-height: 64px;
    --md-sys-layout-nav-width:     280px;

    /* ── Typography tokens ───────────────────────────── */
    --md-sys-typescale-body-font: 'Roboto', Helvetica, Arial, sans-serif;
    --md-sys-typescale-heading-font: 'Aller', 'Aller Bold', Helvetica, Arial, sans-serif;
}