:root {
    --bg: #f3f6f8;
    --surface: #ffffff;
    --surface-muted: #f8fafb;
    --text: #0f172a;
    --text-soft: #475569;
    --border: #dbe4ea;
    --primary: #0f766e;
    --primary-hover: #0a5a54;
    --danger: #b42318;
    --warning: #b54708;
    --info: #175cd3;
    --success: #067647;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.12);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* Aurora palette */
    --aurora-1: #1a0533;
    --aurora-2: #2d1b69;
    --aurora-3: #4a1a8a;
    --aurora-blob-1: rgba(139, 92, 246, 0.30);
    --aurora-blob-2: rgba(168, 85, 247, 0.25);
    --aurora-blob-3: rgba(236, 200, 255, 0.12);

    /* Glass tokens */
    --glass-bg: rgba(20, 14, 38, 0.82);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --glass-glow: 0 0 60px rgba(139, 92, 246, 0.12);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glass-blur: blur(16px);

    /* Aurora-context text (for content on aurora backgrounds) */
    --aurora-text-high: #f8fafc;
    --aurora-text-med: rgba(255, 255, 255, 0.70);
    --aurora-text-low: rgba(255, 255, 255, 0.45);

    /* Segmented control */
    --seg-bg: rgba(255, 255, 255, 0.06);
    --seg-active-bg: rgba(255, 255, 255, 0.12);
    --seg-hover-bg: rgba(255, 255, 255, 0.08);

    /* Soft CTA (light button on dark bg) */
    --cta-soft-bg: rgba(255, 255, 255, 0.92);
    --cta-soft-text: #1a0533;
    --cta-soft-hover-bg: #ffffff;
}