:root {
    /* Color system */
    --color-bg: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-surface-raised: #ffffff;
    --color-text: #172033;
    --color-text-subtle: #475569;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #1e40af;
    --color-primary-soft: #dbeafe;
    --color-primary-softer: #eff6ff;

    --color-success: #15803d;
    --color-success-soft: #dcfce7;
    --color-warning: #b45309;
    --color-warning-soft: #fef3c7;
    --color-danger: #b91c1c;
    --color-danger-soft: #fee2e2;
    --color-info: #0369a1;
    --color-info-soft: #e0f2fe;
    --color-disabled: #94a3b8;
    --color-disabled-soft: #f1f5f9;
    --color-focus: #2563eb;
    --color-on-primary: #ffffff;
    --color-on-primary-muted: rgba(255, 255, 255, .7);
    --color-surface-translucent: rgba(255, 255, 255, .96);
    --color-primary-glow: rgba(37, 99, 235, .10);

    /* Typography */
    --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    --font-size-display: clamp(2.625rem, 4.5vw, 3.75rem);
    --font-size-h1: clamp(2.25rem, 4vw, 3rem);
    --font-size-h2: clamp(1.875rem, 3vw, 2.5rem);
    --font-size-h3: 1.125rem;
    --font-size-body-lg: 1.125rem;
    --font-size-body: 1rem;
    --font-size-body-sm: .875rem;
    --font-size-caption: .75rem;
    --font-size-label: .75rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-display: 1.08;
    --line-height-heading: 1.15;
    --line-height-body: 1.6;
    --line-height-compact: 1.35;
    --letter-spacing-display: -.04em;
    --letter-spacing-heading: -.025em;
    --letter-spacing-label: .08em;

    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Layout and geometry */
    --container-max: 73.75rem;
    --container-padding: 1rem;
    --container-padding-mobile: .625rem;
    --section-space: var(--space-9);
    --section-space-mobile: var(--space-8);
    --card-padding: var(--space-5);
    --card-padding-lg: var(--space-6);
    --control-gap: var(--space-3);
    --radius-sm: .5rem;
    --radius-control: .625rem;
    --radius-card: .875rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;
    --control-height: 2.5rem;
    --control-height-lg: 3rem;

    /* Elevation and interaction */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, .08);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .12);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);
    --transition-fast: 140ms ease;

    /* Backwards-compatible aliases for pages adopting these tokens. */
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --border: var(--color-border);
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --green: var(--color-success);
    --green-soft: var(--color-success-soft);
    --red: var(--color-danger);
    --red-soft: var(--color-danger-soft);
    --blue: var(--color-primary);
    --radius: var(--radius-card);
}

@media (max-width: 680px) {
    :root {
        --font-size-display: clamp(2.125rem, 9vw, 2.5rem);
        --font-size-h1: clamp(2rem, 9vw, 2.5rem);
        --section-space: var(--section-space-mobile);
        --card-padding-lg: var(--space-5);
    }
}