/* ============================================================
   EASY TRADING ACADEMY — Design Tokens
   Todos los valores del sistema de diseño en un solo lugar.
   No escribir colores, tamaños ni espaciados a mano en otros archivos.
   ============================================================ */

:root {

  /* ── COLORES ─────────────────────────────────────────── */

  /* Fondos (escala oscura) */
  --bg-base:     #0F0F10;   /* fondo raíz de página */
  --bg-elevated: #1A1A1B;   /* cards, nav, secciones elevadas */
  --bg-surface:  #242425;   /* inputs, thumbnails, elementos internos */

  /* Bordes */
  --border:        #2E2E30;
  --border-strong: #3A3A3C;

  /* Textos */
  --text-primary:   #F5F5F5;
  --text-secondary: #A8A8A8;
  --text-muted:     #6B6B6B;

  /* Acento dorado */
  --accent:        #D4A017;
  --accent-hover:  #E5B43D;
  --accent-muted:  rgba(212, 160, 23, 0.12);
  --accent-subtle: rgba(212, 160, 23, 0.04);

  /* Estados */
  --success: #34D399;
  --danger:  #EF4444;
  --warning: #F59E0B;


  /* ── TIPOGRAFÍA ──────────────────────────────────────── */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala desktop */
  --fs-hero:    72px;
  --fs-h1:      56px;
  --fs-h2:      44px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-body-l:  18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12px;

  /* Escala mobile */
  --fs-hero-m:  40px;
  --fs-h1-m:    36px;
  --fs-h2-m:    30px;
  --fs-h3-m:    22px;
  --fs-h4-m:    18px;

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Interlineado */
  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.6;


  /* ── ESPACIADO (grid de 8px) ─────────────────────────── */

  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  128px;


  /* ── RADIOS ──────────────────────────────────────────── */

  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;


  /* ── SOMBRAS ─────────────────────────────────────────── */

  --shadow-sm:     0 2px 8px  rgba(0, 0, 0, 0.3);
  --shadow:        0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 48px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 0 1px rgba(212, 160, 23, 0.2),
                   0 8px 32px rgba(212, 160, 23, 0.12);


  /* ── LAYOUT ──────────────────────────────────────────── */

  --container:      1200px;
  --container-sm:   860px;
  --container-xs:   640px;

  --header-height:  64px;


  /* ── TRANSICIONES ────────────────────────────────────── */

  --transition:      all 0.2s ease;
  --transition-slow: all 0.35s ease;
}