/* ============================================================
   CAREEROPS — DESIGN TOKENS
   Todas las variables del sistema de diseño en un solo lugar.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Colores base (Dark Mode — por defecto) ─────────────────── */
:root {
  /* Fondos */
  --bg-base:      #07070d;
  --bg-surface:   #0e0e18;
  --bg-elevated:  #15151f;
  --bg-hover:     #1c1c28;
  --bg-active:    #212131;

  /* Bordes */
  --border:       rgba(255 255 255 / .08);
  --border-strong: rgba(255 255 255 / .16);
  --border-focus: rgba(99 102 241 / .6);

  /* Acento — Indigo */
  --accent:       #6366f1;
  --accent-light: #818cf8;
  --accent-glow:  rgba(99 102 241 / .25);
  --accent-hover: #7c7ff5;

  /* Texto */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-accent:    #a5b4fc;

  /* Scores */
  --score-high:    #22c55e;   /* ≥ 4.5 */
  --score-good:    #84cc16;   /* 4.0–4.4 */
  --score-mid:     #f59e0b;   /* 3.5–3.9 */
  --score-low:     #ef4444;   /* < 3.5 */

  /* Semánticos */
  --success:  #22c55e;
  --warning:  #f59e0b;
  --error:    #ef4444;
  --info:     #38bdf8;

  /* Glow de suceso */
  --success-glow: rgba(34 197 94 / .2);
  --error-glow:   rgba(239 68 68 / .2);

  /* Estados de aplicación */
  --state-evaluated: #6366f1;
  --state-applied:   #38bdf8;
  --state-interview: #f59e0b;
  --state-offer:     #22c55e;
  --state-rejected:  #ef4444;
  --state-skip:      #64748b;

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans: '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 */

  /* ── Espaciado ──────────────────────────────────────────── */
  --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;

  /* ── Radios ─────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0 0 0 / .4);
  --shadow:    0 4px 16px rgba(0 0 0 / .5);
  --shadow-lg: 0 8px 32px rgba(0 0 0 / .6);
  --shadow-accent: 0 0 20px var(--accent-glow);

  /* ── Transiciones ───────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition:      220ms ease;
  --transition-slow: 350ms ease;

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width: 240px;
  --header-height: 56px;
  --max-content:   960px;
}