:root {
    --bg: #f9fafb;
    --surface: #ffffff;
    --surface-2: #f3f4f6;
    --border: #e5e7eb;
    --text: #111827;
    --text-muted: #6b7280;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-tint: rgba(79, 70, 229, 0.08);
    /* Accent used as TEXT/icon colour. Same as --accent in light mode; the dark
       override is lightened so accent text clears WCAG AA on dark surfaces
       (solid --accent #6366f1 as text was only ~3.8:1). Keep --accent itself for
       button fills / borders where it pairs with white. */
    --accent-text: #4f46e5;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-tint: var(--danger-tint);
    /* Status colours. Fills/icons use --success / --warning; text on a tinted
       background uses the darker --warning-text for contrast. */
    --success: #16a34a;
    --warning: #d97706;
    --warning-tint: rgba(217, 119, 6, 0.12);
    --warning-text: #b45309;
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --radius: 4px;
    /* Corner-radius scale. --radius (4px) is the base/small tier. */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --transition: 150ms ease;
    /* Fast micro-interaction duration (hover/focus). Was written as
       var(--transition-fast) / var(--transition-fast) / var(--transition-fast) across the sheet — one token, one value. */
    --transition-fast: var(--transition-fast);
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    /* Stacking layers (global). In-component overlays keep small raw values. */
    --z-sticky: 5;
    --z-topbar: 10;
    --z-popover: 100;
    --z-modal: 1000;
    /* Type scale. Steps sit on the dominant existing sizes so the bulk of the
       UI is unchanged; off-step sizes snap to the nearest. (0.5rem micro-labels
       stay raw.) */
    --text-2xs: 0.7rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8rem;
    --text-md: 0.85rem;
    --text-base: 0.9rem;
    --text-lg: 1rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.75rem;
    /* Spacing scale (0.25rem grid). Applied to gap/padding/margin; off-grid
       fine-spacing values and shorthands are left raw for now. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* Aliases for token names that were referenced throughout the stylesheet
       but never defined — they always fell back to a hardcoded literal and so
       silently ignored the dark theme. Mapped onto the canonical tokens above
       so they now adapt automatically. (A full hex→token sweep is Phase 3 /
       #248; this only makes the existing references theme-aware.) */
    --brand: var(--accent);
    --primary: var(--accent);
    --background: var(--bg);
    --muted: var(--text-muted);
    --hover-bg: var(--surface-2);
    --bg-muted: var(--surface-2);
    --bg-subtle: var(--surface-2);
    --surface-elevated: var(--surface);
    --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Login error box palette (light). Dark overrides below. */
    --danger-bg: #fff1f2;
    --danger-border: #fecdd3;
    --danger-text: #9f1239;

    /* Success notice palette (light), mirroring --danger-*: tinted background +
       border + darker text for contrast. Dark overrides below. */
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;
    --success-text: #15803d;
}

[data-theme="dark"] {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface-2: #222534;
    --border: #2e3146;
    --text: #e8eaf0;
    --text-muted: #8b90a7;
    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-text: #818cf8;
    --accent-tint: rgba(99, 102, 241, 0.12);
    --danger: #f87171;
    --danger-hover: #fca5a5;
    --danger-tint: rgba(248, 113, 113, 0.18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);

    /* Login error box — dark variant (the aliased tokens above already adapt
       via their canonical tokens; only this literal palette needs an override). */
    --danger-bg: rgba(248, 113, 113, 0.12);
    --danger-border: rgba(248, 113, 113, 0.35);
    --danger-text: #fca5a5;

    /* Success notice palette — dark variant. */
    --success-bg: rgba(74, 222, 128, 0.12);
    --success-border: rgba(74, 222, 128, 0.35);
    --success-text: #4ade80;

    /* Warning palette — dark variant. The light --warning-text (#b45309) is a
       dark brown meant for light tints; on dark surfaces it only reaches ~2.9:1
       (WCAG AA fail). Lighten the family like --danger/--success so warning text
       on its tint clears AA (~8:1). Solid --warning is only used for dots / icons
       / borders, so lightening it is purely graphical. */
    --warning: #fbbf24;
    --warning-tint: rgba(251, 191, 36, 0.15);
    --warning-text: #fcd34d;
}