/* ============================================================
   TRACCIÓN — Design Tokens
   Único source of truth para colores, tipografías y spacing.
   Cualquier cambio de marca se hace aquí.
   ============================================================ */

:root {
  /* --- Colores de marca --- */
  --bg: #0A0A0A;             /* Fondo principal */
  --bg-elev: #111111;        /* Superficies elevadas (newsletter, país, author-box) */
  --line: #1A1A1A;           /* Divisores, bordes */
  --line-soft: #131313;      /* Grid sutil sobre imágenes */
  --accent: #C8FF00;         /* Verde lima — "I" del logo, CTAs, pills */
  --accent-soft: #1A6B3C;    /* Verde oscuro para fondos claros */
  --text: #FFFFFF;           /* Texto principal */
  --text-dim: #AAAAAA;       /* Texto secundario */
  --text-mute: #6B6B6B;      /* Texto terciario / metadatos */
  --danger: #FF4D4D;         /* Valores negativos en ticker */

  /* Por categoría (barra superior de imágenes OG) */
  --cat-industria: #2D7DD2;
  --cat-negocios: #1A6B3C;
  --cat-rankings: #D4A732;
  --cat-estilo: #8B5CF6;
  --cat-opinion: #FFFFFF;

  /* --- Tipografía --- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* --- Spacing / layout --- */
  --wrap-max: 1360px;
  --wrap-pad: 32px;
  --wrap-pad-mobile: 18px;

  /* --- Radii --- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;
}

@media (max-width: 640px) {
  :root {
    --wrap-pad: var(--wrap-pad-mobile);
  }
}