/* ============================================================
   tokens.css — Design tokens globales
   Fuente única de verdad para colores, tipografía y espaciado
   ============================================================ */

:root {

  /* ── Colores base ─────────────────────────────────────────── */
  --color-bg:          #080c10;
  --color-bg-alt:      #0b0f14;
  --color-surface:     #0e1318;
  --color-surface-alt: #111820;
  --color-border:      #1a2230;
  --color-border-soft: #151f2a;

  /* ── Paleta de acento ─────────────────────────────────────── */
  --color-green:       #22c55e;
  --color-green-dim:   #16a34a;
  --color-green-glow:  rgba(34, 197, 94, 0.15);
  --color-green-trace: rgba(34, 197, 94, 0.06);

  --color-blue:        #3b82f6;
  --color-blue-dim:    #2563eb;
  --color-blue-glow:   rgba(59, 130, 246, 0.15);

  --color-red:         #ef4444;
  --color-red-glow:    rgba(239, 68, 68, 0.15);

  --color-amber:       #f59e0b;

  /* ── Texto ────────────────────────────────────────────────── */
  --color-text:        #e8edf2;
  --color-text-soft:   #94a3b8;
  --color-text-muted:  #4a5568;
  --color-text-faint:  #2d3748;

  /* ── Ranks ────────────────────────────────────────────────── */
  --color-bronze:      #cd7f32;
  --color-silver:      #c0c0c0;
  --color-gold:        #ffd700;
  --color-legend:      #a78bfa;

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-base:         'Outfit', sans-serif;
  --font-display:      'Outfit', sans-serif;  /* swap si añades otra */

  --text-xs:           11px;
  --text-sm:           13px;
  --text-base:         15px;
  --text-md:           17px;
  --text-lg:           20px;
  --text-xl:           24px;
  --text-2xl:          30px;
  --text-3xl:          38px;
  --text-4xl:          48px;

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

  --leading-tight:     1.1;
  --leading-snug:      1.35;
  --leading-normal:    1.5;
  --leading-relaxed:   1.65;

  /* ── Espaciado (escala 4px) ──────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;

  /* ── Radios ───────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* ── Sombras ──────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 32px 80px rgba(0, 0, 0, 0.55);
  --shadow-green: 0 0 24px rgba(34, 197, 94, 0.2);

  /* ── Transiciones ─────────────────────────────────────────── */
  --transition-fast:   0.1s ease;
  --transition-base:   0.15s ease;
  --transition-slow:   0.25s ease;
  --transition-slower: 0.4s ease;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-loading: 999;

  /* ── Layout ───────────────────────────────────────────────── */
  --nav-height:       60px;
  --content-max:      900px;
  --content-wide:     1200px;
  --content-padding:  clamp(16px, 4vw, 28px);
}