/* ═══════════════════════════════════════════════════════════
   CSS Custom Properties — Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Color Palette ─── */
    --color-bg:            #0a0a0f;
    --color-bg-secondary:  #111118;
    --color-bg-tertiary:   #1a1a24;
    --color-bg-card:       #14141e;
    --color-bg-card-hover: #1c1c2a;

    --color-surface:       rgba(255, 255, 255, 0.03);
    --color-surface-hover: rgba(255, 255, 255, 0.06);
    --color-border:        rgba(255, 255, 255, 0.08);
    --color-border-hover:  rgba(255, 255, 255, 0.15);

    --color-text:          #e4e4ec;
    --color-text-secondary:#9494a8;
    --color-text-muted:    #5e5e72;

    /* ─── Accent Gradient ─── */
    --color-accent:        #6366f1;
    --color-accent-light:  #818cf8;
    --color-accent-dark:   #4f46e5;
    --color-accent-glow:   rgba(99, 102, 241, 0.25);

    --color-cyan:          #22d3ee;
    --color-emerald:       #34d399;
    --color-rose:          #fb7185;
    --color-amber:         #fbbf24;

    --gradient-primary:    linear-gradient(135deg, var(--color-accent) 0%, var(--color-cyan) 100%);
    --gradient-text:       linear-gradient(135deg, #818cf8 0%, #22d3ee 50%, #34d399 100%);
    --gradient-card:       linear-gradient(180deg, rgba(99,102,241,0.08) 0%, transparent 60%);
    --gradient-glow:       radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 40%);

    /* ─── Typography ─── */
    --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  3.75rem;    /* 60px */
    --text-7xl:  4.5rem;     /* 72px */

    /* ─── Spacing ─── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ─── Layout ─── */
    --container-max:  1200px;
    --container-pad:  var(--space-6);
    --section-pad:    var(--space-24) 0;

    /* ─── Borders ─── */
    --radius-sm:  0.375rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;
    --radius-xl:  1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ─── Shadows ─── */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 30px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 40px var(--color-accent-glow);

    /* ─── Transitions ─── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;

    /* ─── Z-index ─── */
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;
}