/* =========================================================
   GOES — Tokens de diseño (variables CSS)
   Ajusta los valores marcados con TODO cuando tengamos los
   exactos del Figma (colores de marca y tipografías).
   ========================================================= */

:root {
  /* Marca */
  --goes-orange: #E9591F;          /* muestreado del Figma; confirmar exacto con Dev Mode */
  --goes-orange-600: #C6491A;
  --goes-orange-100: #FDEAE1;
  --goes-on-orange: #141414;       /* sobre bandas naranjas los titulares van en oscuro */

  /* Radios y bordes */
  --goes-radius: 32px;             /* esquinas del Figma */
  --goes-radius-sm: 16px;
  --goes-radius-pill: 999px;
  --goes-border: 1px;

  /* Tipografía — Figma: Helvetica Neue LT (Std/Pro).
     Titulares/números en el cut "93 Black Extended" (peso 900, ancho extendido).
     Helvetica Neue LT es DE PAGO (Monotype); si se licencia, sube los .woff2 a assets/fonts/
     y decláralos con @font-face. Si no, el stack cae en "Archivo" (Google Fonts, gratis),
     el sustituto más cercano al look ancho y pesado. */
  --goes-font-head: "Helvetica Neue LT Std", "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --goes-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala del Figma: H1 64 · H2 48 · H3 32 · P 18 */
  --goes-h1: clamp(2.6rem, 6vw, 4rem);
  --goes-h2: clamp(1.9rem, 4vw, 3rem);
  --goes-h3: clamp(1.35rem, 2.4vw, 2rem);
  --goes-fs-body: 18px;
  --goes-container: 1280px;
  --goes-gap: 24px;

  /* Sombra */
  --goes-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* ---------- Tema OSCURO (por defecto) ---------- */
:root,
[data-theme="dark"] {
  --goes-bg: #0E0E0E;
  --goes-bg-2: #161616;
  --goes-surface: #1B1B1B;
  --goes-surface-2: #232323;
  --goes-text: #F5F5F5;
  --goes-text-muted: #B4B4B4;
  --goes-border-col: rgba(255,255,255,.10);
  --goes-hero-overlay: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75));
}

/* ---------- Tema CLARO ---------- */
[data-theme="light"] {
  --goes-bg: #FFFFFF;
  --goes-bg-2: #F4F5F7;
  --goes-surface: #FFFFFF;
  --goes-surface-2: #F1F2F4;
  --goes-text: #14181F;
  --goes-text-muted: #5B6675;
  --goes-border-col: rgba(0,0,0,.10);
  --goes-hero-overlay: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}