:root {
    /* Palette — dreamy gradient on minimalist near-black */
    --bg-base: #070716;
    --bg-elevated: #0f0f25;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.05);

    --grad-a: #6366f1;   /* indigo */
    --grad-b: #ec4899;   /* pink   */
    --grad-c: #22d3ee;   /* cyan   */
    --grad-d: #a855f7;   /* violet */

    --text-primary: #f4f4fa;
    --text-secondary: #a1a4bd;
    --text-muted: #6c6f87;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --ok: #34d399;
    --warn: #f59e0b;

    /* Gradients */
    --grad-primary: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 60%, var(--grad-c) 100%);
    --grad-soft: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(236,72,153,0.12) 60%, rgba(34,211,238,0.10) 100%);
    --grad-text: linear-gradient(120deg, #c7d2fe 0%, #f9a8d4 50%, #67e8f9 100%);

    /* Typography */
    --font-sans: 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Inter', system-ui, sans-serif;

    /* Spacing — balanced & comfortable */
    --space-xs: 0.5rem;
    --space-sm: 0.875rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 7rem;
    --space-3xl: 10rem;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Layout */
    --container: 1240px;
    --nav-height: 76px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 220ms;
    --dur-mid: 460ms;
    --dur-slow: 760ms;

    /* Shadows */
    --shadow-glow: 0 30px 80px -20px rgba(99, 102, 241, 0.45);
    --shadow-card: 0 20px 60px -25px rgba(0, 0, 0, 0.6);
}