/* ═══════════════════════════════════════════════
   NextHire — Design Tokens (variables.css)
   Premium dark theme with vibrant accents
   ═══════════════════════════════════════════════ */

:root {
  /* ── Color Palette ── */
  --color-bg-primary:    #06060b;
  --color-bg-secondary:  #0c0c16;
  --color-bg-tertiary:   #12121f;
  --color-bg-card:       #14142a;
  --color-bg-elevated:   #1a1a35;
  --color-bg-input:      #10101e;
  --color-bg-hover:      #1e1e3a;

  /* Surface with alpha for glassmorphism */
  --color-glass:         rgba(20, 20, 42, 0.65);
  --color-glass-border:  rgba(99, 102, 241, 0.15);
  --color-glass-hover:   rgba(99, 102, 241, 0.08);

  /* Text */
  --color-text-primary:   #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #64748b;
  --color-text-heading:   #e2e8f0;

  /* Accent — Indigo to Purple gradient range */
  --color-accent:        #6366f1;
  --color-accent-hover:  #7c7ff7;
  --color-accent-light:  #818cf8;
  --color-accent-dark:   #4f46e5;
  --color-accent-subtle: rgba(99, 102, 241, 0.12);

  /* Secondary Accent — Violet */
  --color-violet:        #8b5cf6;
  --color-violet-light:  #a78bfa;
  --color-violet-dark:   #7c3aed;

  /* Semantic Colors */
  --color-success:       #10b981;
  --color-success-light: #34d399;
  --color-success-bg:    rgba(16, 185, 129, 0.1);
  --color-warning:       #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-bg:    rgba(245, 158, 11, 0.1);
  --color-error:         #ef4444;
  --color-error-light:   #f87171;
  --color-error-bg:      rgba(239, 68, 68, 0.1);
  --color-info:          #3b82f6;
  --color-info-bg:       rgba(59, 130, 246, 0.1);

  /* Gradients */
  --gradient-primary:    linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  --gradient-button:     linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-hero:       linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.08) 50%, rgba(168,85,247,0.05) 100%);
  --gradient-card:       linear-gradient(145deg, rgba(20,20,42,0.8) 0%, rgba(12,12,22,0.9) 100%);
  --gradient-border:     linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.1), rgba(168,85,247,0.3));
  --gradient-glow:       radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 40%);
  --gradient-text:       linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);

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

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.5rem;     /* 40px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */
  --fs-hero:  clamp(2.5rem, 5vw, 4.5rem);

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;

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

  /* ── Border Radius ── */
  --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 6px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-lg:    0 10px 25px rgba(0,0,0,0.4);
  --shadow-xl:    0 20px 50px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 30px rgba(99,102,241,0.15);
  --shadow-glow-lg: 0 0 60px rgba(99,102,241,0.2);

  /* ── 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:  250ms;
  --duration-slow:  400ms;

  /* ── Z-Index Scale ── */
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-fixed:     30;
  --z-modal:     40;
  --z-toast:     50;

  /* ── Container ── */
  --container-max: 1200px;
  --container-pad: var(--sp-6);

  /* ── Blur ── */
  --blur-sm:  8px;
  --blur-md:  16px;
  --blur-lg:  24px;
}