:root {
    color-scheme: dark;

    /* Color primitives */
    --color-bg: #0a0e1a;
    --color-surface: #0f1525;
    --color-surface-2: #141c30;
    --color-primary: #4a8fff;
    --color-primary-light: #7bb3ff;
    --color-text: #e0e8ff;
    --color-text-muted: rgba(160, 180, 220, 0.6);
    --color-border: rgba(60, 130, 255, 0.15);
    --color-border-hover: rgba(60, 130, 255, 0.35);
    --color-border-focus: rgba(74, 143, 255, 0.5);

    /* Legacy aliases: keep the current public contract during the migration. */
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --surface-2: var(--color-surface-2);
    --primary: var(--color-primary);
    --primary-light: var(--color-primary-light);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --border: var(--color-border);
    --border-hover: var(--color-border-hover);
    --border-focus: var(--color-border-focus);

    /* Shape primitives and semantic radii */
    --radius-1: 10px;
    --radius-2: 14px;
    --radius-3: 18px;
    --radius-4: 28px;
    --radius-control: var(--radius-1);
    --radius-surface: var(--radius-2);
    --radius-card: var(--radius-3);
    --radius-feature: clamp(20px, 3vw, var(--radius-4));
    --radius-pill: 999px;
    --shape-continuous: squircle;
    --shape-circular: round;

    /* Shared interaction and depth */
    --focus-ring: 0 0 0 3px rgba(74, 143, 255, 0.24);
    --shadow-surface: 0 18px 44px rgba(2, 6, 18, 0.22);
    --motion-fast: 180ms;
    --motion-base: 240ms;
}