/* ============================================================================
   Vitta — tokens de diseño
   ----------------------------------------------------------------------------
   Fuente única de verdad para colores, tipografía, espaciados, radios y
   sombras de TODA la web (WordPress + intranet). Solo variables: ninguna
   regla vive aquí. Las reglas que las consumen están en base.css (elementos
   comunes) y en las hojas de estilo propias de cada sitio (shared.css de la
   intranet, style.css del tema de WordPress).

   Este archivo se monta de solo lectura en los dos contenedores — ver
   docker-compose.yml — así que un cambio aquí se propaga a WordPress y a la
   intranet sin reconstruir ni copiar nada.
   ========================================================================== */

:root {
  /* ── Colores de marca ── */
  --navy: #232346;
  --teal: #8DCFD4;
  --white: #FFFFFF;

  /* ── Derivados de marca (transparencias sobre navy/teal, usados en toda
     la web para fondos suaves, bordes y texto secundario) ── */
  --teal-l: rgba(141, 207, 212, 0.18);
  --teal-m: rgba(141, 207, 212, 0.45);
  /* Celeste oscuro para TEXTO sobre blanco (antetítulos de la web
     pública, maqueta de la home): el --teal de marca sobre blanco da
     1,75:1, ilegible; este mantiene el tono y da 5,74:1. No usarlo sobre
     navy (2,6:1): ahí va --teal. */
  --teal-d: #237077;
  --bg: #f7f8fa;
  --border: rgba(35, 35, 70, 0.1);
  --text-muted: rgba(35, 35, 70, 0.5);
  --red: #c0392b;
  /* Ámbar semántico (aviso, sin ser error), de la maqueta de VITTA IA:
     señales de alarma y el escenario «No actuar». Mismo reparto que el
     celeste: --ambar-d para TEXTO sobre blanco (4,76:1), --ambar sobre
     navy (5,82:1). */
  --ambar: #D3945A;
  --ambar-d: #A9611A;

  /* ── Tipografía ──
     Satoshi en todo el proyecto (decisión congelada, ver CLAUDE.md),
     autoalojada en shared/fonts/satoshi/ — ver los @font-face en base.css.
     Antes era DM Sans aquí y Satoshi solo en la intranet (redeclarada por
     encima, en intranet/public/shared.css); ya no hace falta ese redeclare,
     esta es ahora la única fuente para WordPress y para la intranet. */
  --font-sans: 'Satoshi', sans-serif;

  /* ── Escala de espaciados ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Radios ── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px rgba(35, 35, 70, .06);
  --shadow-md: 0 4px 16px rgba(35, 35, 70, .1);

  /* ── Alto real de la cabecera superpuesta de la home en WordPress ──
     Solo lo consume hoy esa variante (front-page.css, escenario.css),
     para compensar el hueco que deja la cabecera fija por encima de todo
     -- vive aquí, no en front-page.css, porque tokens.css es la fuente
     única de medidas compartidas. Cambiar aquí mueve las dos cosas a la
     vez y de forma coherente.
     Es el alto que supone el diseño (72px) y la cabecera de la home lo
     toma directamente (height: var(--header-h) en front-page.css), en vez
     de salir de sumar relleno + contenido -- antes esa suma daba 77px en
     escritorio (el menú en pastilla mide 35px) y todo lo que compensaba
     72 quedaba 5px corto. Cambiar el valor aquí mueve la cabecera, el
     escenario fijo y el desplazamiento a las anclas a la vez. */
  --header-h: 72px;

  /* ── Breakpoints (de referencia) ──
     CSS no permite var() dentro de la condición de un @media, así que estos
     mismos valores están escritos a mano en los @media de base.css y de
     shared.css. Si cambian aquí, cambiarlos también allí. */
  --bp-sm: 640px;
  --bp-md: 900px;
}