:root {
    /* =========================
       Primitive colors
    ========================= */
    --color-slate-950: #08101d;
    --color-slate-900: #0b1020;
    --color-slate-850: #10162b;
    --color-slate-800: #121933;

    --color-white: #ffffff;
    --color-white-50: #f5f7ff;
    --color-white-100: #cbd6ff;
    --color-white-200: #b8c0e0;

    --color-blue-400: #99adff;
    --color-blue-500: #7c9cff;
    --color-teal-400: #66e0c2;
    --color-yellow-400: #ffd166;
    --color-black: #000000;

    /* =========================
       Alpha colors
    ========================= */
    --color-white-alpha-04: rgba(255, 255, 255, 0.04);
    --color-white-alpha-05: rgba(255, 255, 255, 0.05);
    --color-white-alpha-06: rgba(255, 255, 255, 0.06);
    --color-white-alpha-08: rgba(255, 255, 255, 0.08);
    --color-white-alpha-10: rgba(255, 255, 255, 0.10);
    --color-white-alpha-12: rgba(255, 255, 255, 0.12);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);

    --color-blue-alpha-14: rgba(124, 156, 255, 0.14);
    --color-blue-alpha-16: rgba(124, 156, 255, 0.16);
    --color-blue-alpha-20: rgba(124, 156, 255, 0.20);

    --color-teal-alpha-14: rgba(102, 224, 194, 0.14);

    --color-black-alpha-35: rgba(0, 0, 0, 0.35);
    --color-slate-alpha-70: rgba(8, 16, 29, 0.7);

    /* =========================
       Semantic color tokens
    ========================= */
    --color-bg-page: var(--color-slate-900);
    --color-bg-page-deep: var(--color-slate-950);
    --color-bg-page-alt: var(--color-slate-800);
    --color-bg-page-bottom: var(--color-slate-850);

    --color-text-primary: var(--color-white-50);
    --color-text-secondary: var(--color-white-200);
    --color-text-highlight: var(--color-white-100);
    --color-text-on-brand: var(--color-slate-950);

    --color-surface-card: var(--color-white-alpha-08);
    --color-surface-soft: var(--color-white-alpha-04);
    --color-surface-soft-hover: var(--color-white-alpha-05);
    --color-surface-tag: var(--color-white-alpha-06);
    --color-surface-topbar: var(--color-slate-alpha-70);

    --color-border-subtle: var(--color-white-alpha-08);
    --color-border-soft: var(--color-white-alpha-10);
    --color-border-medium: var(--color-white-alpha-12);
    --color-border-strong: var(--color-white-alpha-15);

    --color-brand-primary: var(--color-blue-500);
    --color-brand-primary-light: var(--color-blue-400);
    --color-brand-secondary: var(--color-teal-400);
    --color-accent: var(--color-yellow-400);

    --color-state-info-soft: var(--color-blue-alpha-14);
    --color-glow-primary: var(--color-blue-alpha-16);
    --color-glow-secondary: var(--color-teal-alpha-14);

    /* =========================
       Gradients
    ========================= */
    --gradient-page:
            radial-gradient(circle at top left, var(--color-glow-primary), transparent 28%),
            radial-gradient(circle at top right, var(--color-glow-secondary), transparent 24%),
            linear-gradient(
                    180deg,
                    var(--color-bg-page-deep) 0%,
                    var(--color-bg-page) 35%,
                    var(--color-bg-page-bottom) 100%
            );

    --gradient-brand: linear-gradient(
            135deg,
            var(--color-brand-primary),
            var(--color-brand-secondary)
    );

    --gradient-button-primary: linear-gradient(
            135deg,
            var(--color-brand-primary),
            var(--color-brand-primary-light)
    );

    --gradient-card: linear-gradient(
            180deg,
            var(--color-white-alpha-10),
            var(--color-white-alpha-05)
    );

    --gradient-cta: linear-gradient(
            135deg,
            var(--color-blue-alpha-20),
            var(--color-teal-alpha-14)
    );

    /* =========================
       Shadows
    ========================= */
    --shadow-xl: 0 20px 60px var(--color-black-alpha-35);

    /* =========================
       Radius
    ========================= */
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-2xl: 22px;
    --radius-3xl: 26px;
    --radius-4xl: 28px;
    --radius-full: 999px;

    /* =========================
       Spacing
    ========================= */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 46px;
    --space-12: 56px;
    --space-13: 70px;
    --space-14: 88px;

    /* =========================
       Layout
    ========================= */
    --container-max: 1180px;

    /* =========================
       Typography
    ========================= */
    --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-size-body-sm: 0.92rem;
    --font-size-body-md: 0.95rem;
    --font-size-body-lg: 1.12rem;

    --line-height-tight: 1.02;
    --line-height-body: 1.7;
    --line-height-relaxed: 1.75;
    --line-height-list: 1.8;

    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --letter-spacing-sm: 0.3px;
    --letter-spacing-tight: -0.03em;
    --letter-spacing-tighter: -0.04em;

    /* =========================
       Motion
    ========================= */
    --transition-fast: 0.2s ease;

    /* =========================
       Effects
    ========================= */
    --blur-topbar: 14px;
}