/* ==========================================================================
   TOKENS — única fuente de verdad del sistema visual.
   Cambiar la marca, la escala o el ritmo se hace AQUÍ y se propaga solo.
   Ningún otro archivo debe declarar un color, un tamaño ni un radio literal.
   ========================================================================== */

:root {

  /* --- Paleta de marca ---------------------------------------------------
     Los cuatro colores institucionales, más un neutro derivado.
     "sand" no viene de la marca: es el marfil oscurecido, y existe para que
     las tarjetas marfil tengan un fondo del que despegarse.                */
  --brand-navy:       #0A1F40;
  --brand-terracotta: #DA5A2E;
  --brand-teal:       #256670;
  --brand-ivory:      #FBF5EF;
  --brand-sand:       #EFE4D8;

  /* --- Roles semánticos --------------------------------------------------
     Los componentes consumen ESTOS, nunca los de arriba. Así un cambio de
     rol (p. ej. que el énfasis pase de marino a petróleo) es una línea.
     Contrastes medidos sobre la paleta:
       marino s/ marfil ....... 15.1:1
       marino s/ arena ........ 13.1:1
       petróleo s/ marfil ......6.0:1   ← mínimo apto para texto pequeño
       marfil s/ marino ....... 15.1:1
       marfil s/ petróleo ......6.0:1
       terracota s/ marfil .....3.5:1   ← solo texto grande (>=24px)
       terracota s/ marino .....4.3:1   ← solo texto grande                */
  --color-canvas:            var(--brand-sand);
  --color-surface:           var(--brand-ivory);
  --color-surface-deep:      var(--brand-navy);
  --color-surface-alt:       var(--brand-teal);

  --color-text:              var(--brand-navy);
  --color-text-on-dark:      var(--brand-ivory);
  --color-text-muted:        rgba(10, 31, 64, 0.55);
  --color-text-muted-dark:   rgba(251, 245, 239, 0.55);
  --color-text-soft-dark:    rgba(251, 245, 239, 0.75);

  --color-accent:            var(--brand-terracotta);  /* solo texto grande y gráficos */
  --color-label:             var(--brand-teal);        /* antetítulos sobre claro */

  --color-border:            rgba(10, 31, 64, 0.15);
  --color-border-dark:       rgba(251, 245, 239, 0.15);
  --color-hairline:          rgba(10, 31, 64, 0.12);

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Escala de escritorio. responsive.css la reescribe por breakpoint:
     al redefinir estas variables, todo el sitio se reescala solo.          */
  --text-display:  96px;   /* h1 de portada          */
  --text-h1:       80px;   /* h1 de páginas interiores */
  --text-h2:       56px;
  --text-h3:       40px;
  --text-h4:       32px;
  --text-stat:       72px;  /* cifras destacadas                    */
  --text-stat-label: 46px;  /* etiqueta de la cifra, en reposo       */
  --text-number:   48px;   /* numeración 01, 02, ... */
  /* Escala de lectura. Subida un escalon respecto al arranque para que el
     texto de parrafos, listas, formularios y pie se lea con comodidad.
     Los titulares no cambian: ya tenian tamano de sobra.                  */
  --text-lead:     20px;
  --text-body:     18px;
  --text-small:    16px;
  --text-label:    15px;
  --text-micro:    13px;

  --leading-display: 0.94;
  --leading-tight:   0.96;
  --leading-snug:    1.25;  /* etiquetas de dos o tres líneas: ni titular ni párrafo */
  --leading-body:    1.55;
  --tracking-display: 0.02em;
  --tracking-label:   0.14em;

  /* --- Espaciado --------------------------------------------------------- */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:  10px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 40px;
  --space-3xl: 56px;
  --space-4xl: 80px;

  /* --- Radios ------------------------------------------------------------
     40px en tarjetas es la firma del sistema: no reducir sin motivo.       */
  --radius-card:   40px;
  --radius-inner:  32px;   /* elementos dentro de una tarjeta */
  --radius-input: 100px;
  --radius-pill:  800px;

  /* --- Layout ------------------------------------------------------------ */
  --max-width:      1440px;  /* contenido */
  --max-width-wide: 1760px;  /* cabecera y pie: se abren más que el contenido */
  --gutter:           40px;  /* margen lateral de página */
  --section-gap:     40px;  /* separación vertical entre secciones */
  --card-padding:    40px;
  --stat-card-h:    146px;  /* alto de la tarjeta de cifra: la usan
                               también los puntos del carrusel para
                               colocarse justo encima                 */
  --grid-gap:        10px;  /* separación entre tarjetas hermanas */
  --header-height:   88px;

  /* --- Interacción ------------------------------------------------------- */
  --tap-target:      52px;  /* alto mínimo de control táctil (mín. accesible: 44px) */
  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
}