/* ============================================
   ElevateCV AI — Design Tokens
   Premium Dark SaaS Design System
   ============================================ */

:root {
    /* ── Backgrounds ───────────────────────────── */
    --bg-base:      #080A14;
    --bg-surface:   #0F172A;
    --bg-elevated:  #1E293B;
    --bg-muted:     #334155;

    /* ── Primary & Accent Palette (Linear / Vercel Dark Purple) ── */
    --color-primary-50:  #f5f3ff;
    --color-primary-100: #ede9fe;
    --color-primary-200: #ddd6fe;
    --color-primary-300: #c4b5fd;
    --color-primary-400: #a78bfa;
    --color-primary-500: #8B5CF6;
    --color-primary-600: #7C3AED;
    --color-primary-700: #6D28D9;
    --color-primary-800: #5B21B6;
    --color-primary-900: #4C1D95;

    /* ── Secondary Palette (Blue / Indigo) ─────── */
    --color-secondary-400: #60A5FA;
    --color-secondary-500: #3B82F6;
    --color-secondary-600: #2563EB;

    /* ── Accent ─────────────────────────────────── */
    --color-accent-400: #A78BFA;
    --color-accent-500: #8B5CF6;
    --color-accent-600: #7C3AED;

    /* ── Text ───────────────────────────────────── */
    --text-primary:   #FFFFFF;
    --text-secondary: #CBD5E1;
    --text-muted:     #94A3B8;
    --text-faint:     #64748B;

    /* ── Borders ────────────────────────────────── */
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-base:    rgba(255, 255, 255, 0.08);
    --border-strong:  rgba(255, 255, 255, 0.14);

    /* ── Semantic Colors ────────────────────────── */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error:   #EF4444;
    --color-info:    #3B82F6;

    /* ── Gradients ──────────────────────────────── */
    --gradient-primary:      linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
    --gradient-primary-hover:linear-gradient(135deg, #6D28D9 0%, #2563EB 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(124,58,237,0.18) 0%, rgba(59,130,246,0.15) 100%);
    --gradient-hero:         linear-gradient(160deg, #080A14 0%, #0D0F2B 50%, #080A14 100%);
    --gradient-accent:       linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
    --gradient-text:         linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
    --gradient-glow:         radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
    --gradient-glow-blue:    radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);

    /* ── Glassmorphism ──────────────────────────── */
    --glass-bg:          rgba(15, 23, 42, 0.75);
    --glass-bg-strong:   rgba(30, 41, 59, 0.85);
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-shadow:      0 20px 60px rgba(0, 0, 0, 0.45);
    --glass-radius:      16px;

    /* Legacy compat aliases */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #080A14;

    /* ── Typography (Plus Jakarta Sans & Inter) ───── */
    --font-family:   'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:   clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --font-size-sm:   clamp(0.8rem, 0.75rem + 0.3vw, 0.875rem);
    --font-size-base: clamp(0.925rem, 0.875rem + 0.35vw, 1rem);
    --font-size-md:   clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
    --font-size-lg:   clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
    --font-size-xl:   clamp(1.25rem, 1.15rem + 0.7vw, 1.5rem);
    --font-size-2xl:  clamp(1.45rem, 1.3rem + 1vw, 2rem);
    --font-size-3xl:  clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    --font-size-4xl:  clamp(2rem, 1.65rem + 2vw, 3rem);
    --font-size-5xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
    --font-size-6xl:  clamp(2.75rem, 2.15rem + 3.5vw, 4.75rem);

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;
    --font-weight-black:    900;

    --line-height-tight:   1.15;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    /* ── Spacing (8px grid) ────────────────────── */
    --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;

    /* ── Border Radius ──────────────────────────── */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.875rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.25rem;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────── */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 28px rgba(124, 58, 237, 0.3);
    --shadow-glow-lg: 0 0 50px rgba(124, 58, 237, 0.25);

    /* ── Transitions (GPU accelerated) ───────────── */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-Index Scale ───────────────────────────── */
    --z-base:     1;
    --z-dropdown: 10;
    --z-sticky:   100;
    --z-navbar:   1000;
    --z-modal:    2000;
    --z-toast:    3000;

    /* ── Layout ──────────────────────────────────── */
    --container-max: 1240px;
    --navbar-height: 72px;
}