/* ============================================
   Design Tokens — Dark Futuristic Portfolio
   ============================================ */
:root {
    /* Base surfaces */
    --bg: #060814;
    --bg-soft: #0a0d1f;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --text: #eaf0ff;
    --text-muted: #9aa6c4;
    --text-dim: #6b7694;

    /* Accents */
    --accent: #6c5ce7;      /* violet */
    --accent-2: #00d4ff;    /* cyan   */
    --accent-3: #ff5edb;    /* pink   */
    --accent-glow: rgba(108, 92, 231, 0.55);
    --cyan-glow: rgba(0, 212, 255, 0.45);

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #6c5ce7 0%, #00d4ff 100%);
    --grad-text: linear-gradient(120deg, #a78bff 0%, #00d4ff 50%, #ff5edb 100%);
    --grad-border: linear-gradient(135deg, rgba(108,92,231,.6), rgba(0,212,255,.6));

    /* Typography */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Spacing scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 7rem;

    /* Layout */
    --container: 1200px;
    --radius: 18px;
    --radius-lg: 28px;

    /* Effects */
    --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --blur: 16px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.6s;
}