/* tokens.css — ÚNICO archivo del proyecto donde puede aparecer un color literal (§8.2, regla R6).
   Regla: ningún otro archivo de public/css/ contiene un `#rrggbb`. Todo se consume por variable.
   Si necesitas un color nuevo, se declara aquí y se documenta; nunca se escribe en línea. */

:root {
  /* ---- Papel / marfil ---------------------------------------------------- */
  --papel:           #F7F2E8;  /* fondo dominante, ~55% del pixel-count del deck */
  --papel-claro:     #FCF7F0;  /* marfil elevado: tarjetas y paneles sobre el fondo */
  --papel-hundido:   #F4EDE4;  /* franjas: "Así funciona", "Ideal para", "También puedes" */
  --papel-borde:     #E8DFD1;  /* filetes y hairlines de tarjeta */

  /* ---- Tinta ------------------------------------------------------------- */
  --tinta:           #000000;  /* NEGRO PURO: titulares, círculos de icono, barras a sangre */
  --tinta-suave:     #1A1A1A;  /* cuerpos de texto sobre marfil */
  --tinta-tenue:     #262626;  /* texto secundario, pies de foto */
  --gris-humo:       #6B6559;  /* metadatos, etiquetas deshabilitadas, placeholders */
  --gris-humo-claro: #9A9287;  /* bordes de campo en reposo */

  /* ---- Oro --------------------------------------------------------------- */
  --oro-profundo:    #6D4C27;  /* sombra del lettering serif en oro */
  --oro:             #96693A;  /* tono medio: titulares en oro, logotipo CII */
  --oro-claro:       #A07443;  /* highlight de titular */
  --oro-badge:       #BB905B;  /* insignia MÁS POPULAR, líneas de acento */
  --oro-boton-ini:   #B28852;  /* barrido metálico de la píldora: inicio */
  --oro-boton-med:   #E3B97F;  /* medio */
  --oro-boton-fin:   #F3CB8E;  /* brillo superior */
  --oro-sobre-negro: #C8A45C;  /* trazo de icono outline dentro de círculo negro */

  /* ---- Estados (derivados de la paleta, NUNCA colores de sistema) --------- */
  --exito:           #4A6B3A;  /* verde oliva apagado, coherente con el papel */
  --alerta:          #8A5A2B;  /* ámbar terroso */
  --error:           #8C2F26;  /* rojo óxido, no rojo semáforo */
  --info:            var(--gris-humo);

  /* ---- Único degradado permitido en todo el proyecto ---------------------- */
  --barrido-oro: linear-gradient(100deg,
    var(--oro-boton-ini) 0%,
    var(--oro-boton-med) 52%,
    var(--oro-boton-fin) 100%);

  /* ---- Sombras (mínimas, cálidas, nunca azuladas) ------------------------ */
  --sombra-tarjeta: 0 1px 0 var(--papel-borde);
  --sombra-elevada: 0 12px 32px rgba(109, 76, 39, .10);
  --sombra-modal:   0 24px 64px rgba(0, 0, 0, .28);
  --sombra-boton:   0 8px 24px rgba(178, 136, 82, .28);

  /* ---- Filetes ----------------------------------------------------------- */
  --filete: 1px solid var(--papel-borde);
  --filete-oro: 1px solid var(--oro-badge);

  /* ---- Velos y luz (derivados; aquí para no repetir literales fuera) ------ */
  /* §8.9.2: velo sobre fotografía arbitraria, opacidad mínima MEDIBLE de .82 */
  --velo-foto: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .82) 100%);
  --velo-solido: rgba(0, 0, 0, .82);
  --halo-oro-fuerte: rgba(243, 203, 142, .22);
  --halo-oro-nulo:   rgba(243, 203, 142, 0);
  --vineta-interior: rgba(109, 76, 39, .07);
  --papel-translucido: rgba(247, 242, 232, .96);
  --tinta-velo: rgba(0, 0, 0, .45);
  --papel-sobre-negro-80: rgba(247, 242, 232, .80);

  /* ---- Tipografía: familias (§8.3) --------------------------------------- */
  --f-display: 'Playfair Display', 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --f-interfaz: Inter, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Escala tipográfica (§8.3.1) --------------------------------------- */
  --t-micro:  0.6875rem;  /* 11px — eyebrows, rails verticales, pies de tabla */
  --t-menor:  0.8125rem;  /* 13px — metadatos, pies de foto, ayudas de campo */
  --t-base:   1rem;       /* 16px — cuerpo */
  --t-cuerpo: 1.0625rem;  /* 17px — cuerpo de lectura larga (legales, guion) */
  --t-lead:   1.25rem;    /* 20px — bajadas */
  --t-h4:     1.5rem;     /* 24px */
  --t-h3:     2rem;       /* 32px */
  /* H2 y H1 son FLUIDOS: en fijo (44 y 64 px) el titular de sección pesaba más que el
     de la página a 390 px, y «MIS CONDUCTORES» a 64 px medía 484 px sobre una columna de
     350 px —el documento se ensanchaba a 504 px y el titular salía cortado (§8.3.2)—. */
  --t-h2:     clamp(1.75rem, 5.5vw, 2.75rem);  /* 28 → 44px */
  --t-h1:     clamp(2.25rem, 7vw, 4rem);       /* 36 → 64px */
  --t-hero:   clamp(2.25rem, 9vw, 6.5rem);  /* 36 → 104px — el héroe debe caber a 320px (§8.3.2) */
  --t-cifra:  clamp(3.5rem, 9vw, 7rem);     /* cifras de plan: 10 / 50 / 100+ */

  /* ---- Espaciado y retícula (§8.4) --------------------------------------- */
  --e-1:  0.25rem;   /*  4px */
  --e-2:  0.5rem;    /*  8px */
  --e-3:  0.75rem;   /* 12px */
  --e-4:  1rem;      /* 16px */
  --e-5:  1.5rem;    /* 24px */
  --e-6:  2rem;      /* 32px */
  --e-7:  3rem;      /* 48px */
  --e-8:  4rem;      /* 64px */
  --e-9:  6rem;      /* 96px */
  --e-10: 8rem;      /* 128px */
  --e-11: 12rem;     /* 192px */

  --ancho-maximo:   1360px;  /* contenedor del sitio */
  --ancho-lectura:  680px;   /* textos legales y guion */
  --ancho-estrecho: 460px;   /* formularios de acceso */
  --canal:          clamp(1.25rem, 5vw, 5rem);  /* margen lateral */
  --radio-chico:    3px;
  --radio:          6px;
  --radio-pildora:  999px;

  /* ---- Ritmo vertical de sección (§8.4) ---------------------------------- */
  --ritmo-seccion: var(--e-10);

  /* ---- Movimiento: espejo CSS de los tokens de §8.6.1 -------------------- */
  --dur-corta: .45s;
  --dur:       1s;
  --dur-larga: 1.4s;
  --suavizado: cubic-bezier(.16, 1, .3, 1);  /* equivalente a power3.out */
  --suavizado-suave: cubic-bezier(.45, 0, .55, 1);

  /* ---- Capas ------------------------------------------------------------- */
  --z-cabecera: 100;
  --z-menu-movil: 500;
  --z-modal: 1000;
  --z-grano: 9999;

  /* ---- Acento de marca (config.marcaAcento, enum cerrado 'oro'|'oro-suave'|'tinta') --- */
  --acento: var(--oro);
  --acento-fuerte: var(--oro-badge);
}

/* `config.marcaAcento` sólo puede mover el acento dentro de estos tres tokens.
   Nunca acepta un color libre: eso sería inyección de estilo (§3.16). */
:root[data-acento='oro-suave'] { --acento: var(--oro-claro); --acento-fuerte: var(--oro-badge); }
:root[data-acento='tinta']     { --acento: var(--tinta);     --acento-fuerte: var(--tinta-suave); }

/* §8.10: prefers-contrast: more — el gris de metadatos sube a tinta tenue
   y los filetes suben a gris humo claro. No es un modo oscuro; no existe modo oscuro (§8.11.21). */
@media (prefers-contrast: more) {
  :root {
    --gris-humo: var(--tinta-tenue);
    --papel-borde: var(--gris-humo-claro);
    --filete: 1px solid var(--gris-humo-claro);
  }
}