/* ==========================================================================
   TOKENS — sistema de diseño Tregolam (rediseño 2026)
   Cerrado por el usuario el 2026-08-06. No añadir colores fuera de esta lista
   sin actualizar este archivo primero — es la fuente única de verdad.
   ========================================================================== */

:root {
  /* Superficies */
  --fondo: #F1F0EC;
  --superficie: #FFFFFF;
  --fondo-2: #E6E4DE;

  /* Líneas */
  --linea: #D5D2C9;
  --linea-2: #EAE8E2;
  --hover: #E6E4DD;

  /* Tinta (texto) */
  --tinta: #171310;
  --tinta-60: #585349;
  --tinta-40: #857F74;

  /* Hero — único bloque con color saturado de fondo */
  --hero: #0F1E33;

  /* Acento — botones, insignias, iconos rellenos */
  --acento: #E2571B;
  --acento-texto: #C2410C; /* texto/enlaces en color: mismo tono, ajustado a contraste AA sobre --fondo/--superficie. Corregido 2026-08-07: el valor anterior (#A8471F) se leía marrón, no naranja. */
  --acento-suave: #FCE7DB;

  /* Fluo — SOLO sobre fondo oscuro, nunca sobre --fondo/--superficie */
  --fluo-autores: #FF7A33; /* vertical autores */
  --fluo-b2b: #CBF04A;     /* vertical e-learning/B2B, exclusivo */

  /* Carbono — negro de fondos sólidos (tarjeta B2B, insignias de estado
     activo), distinto a propósito de --tinta (texto): --tinta es el color
     de lectura del cuerpo, --carbon es un fondo solido. Añadido con la
     maqueta de home (2026-08-07), que introduce este tono nuevo. */
  --carbon: #101314;

  /* Tipografía */
  --f-display: 'Familjen Grotesk', system-ui, sans-serif; /* titulares */
  --f-cuerpo: 'Schibsted Grotesk', system-ui, sans-serif; /* cuerpo de texto */
  --f-mono: 'DM Mono', ui-monospace, monospace;           /* etiquetas y cifras */

  /* Pesos: 400-600 únicamente. Nada bold (700+) en ningún elemento. */
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;

  /* Radio y forma */
  --radio-tarjeta: 14px;
  --radio-boton: 999px; /* píldora, igual que en la maqueta aprobada */
  --radio-campo: 9px;

  /* Layout */
  --ancho-maximo: 1200px;
  --espacio-hero-eyebrow-h1: 40px;   /* separación eyebrow -> H1 en el hero */
  --espacio-hero-copy-cta: 50px;     /* separación copy -> CTA/valoración en el hero */
}