/*
  Cornelia Tulum — tokens de diseño.
  Única fuente de verdad para color, espaciado, radios, sombras,
  duraciones y escala tipográfica. Nadie fuera de este archivo
  escribe un color en crudo.
*/

:root {
  /* ===== Color — rosa · azul · amarillo (brief §4) ===== */
  --cor-tinta:      #07090D; /* negro del cuadro — fondo base */
  --cor-tinta-2:    #0E141C; /* negro elevado — tarjetas */
  /* Ronda 5 (ENCARGO-5.md §1): con el vídeo mostrado entero (`contain`), el fondo de
     `.portada` tiene que ser EXACTAMENTE el negro de la propia pintura o se nota el
     rectángulo flotando sobre un negro ligeramente distinto. `--cor-tinta` (#07090D) es
     un negro de interfaz, no el negro medido del lienzo. Valor sacado promediando en
     Python/PIL los píxeles del borde y de la franja superior de
     `web/activos/toro-poster.jpg` (mismo fotograma que el póster del vídeo): borde
     izquierdo puro ≈ rgb(1,3,7), franja superior (0–12% alto, fuera del toro) ≈
     rgb(1,3,9)–rgb(3,7,14). Se usa SOLO como fondo del héroe — el resto de la interfaz
     (nav, tarjetas, footer) sigue en --cor-tinta, que es el negro "de marca", no el del
     cuadro. */
  --cor-negro-cuadro: #03060D;
  /* Ronda 8: el vídeo de marca del dueño tiene fondo negro PURO. Si el héroe se pinta con
     cualquier otro negro, el rectángulo del vídeo se recorta contra la página y se ve el
     canto. Este token es sólo para el fondo del héroe. */
  --cor-negro-video: #000000;
  /* Ronda 2: --cor-azul aclarado de #2F7FB5 a #4A9AD4 (AUDITORIA-A11Y.md y ENCARGO-2.md §
     "fallo de contraste"). Verificado aquí, no se toma el número de nadie sin recalcular:
     azul/tinta 6,51:1 y azul/tinta-2 6,04:1 como texto (antes 4,58 y 4,25 — el segundo
     fallaba AA). Ir más oscuro (la propuesta de #2A74A8 de auth) iba en la dirección
     contraria: bajaba el contraste, no lo subía. Efecto secundario ya resuelto en
     componentes.css: `papel` sobre este azul más claro cae a 2,74:1, así que donde el azul
     es FONDO (`.tab--activa`) el texto pasa a `--cor-tinta` (6,51:1), nunca `--cor-papel`. */
  --cor-azul:       #4A9AD4; /* azul del toro — color estructural */
  --cor-azul-hondo: #0E2A3F; /* azul de sombra */
  --cor-rosa:       #FF5C8A; /* rosa — acción primaria (CTA, hotspot) */
  --cor-amarillo:   #FFC24B; /* amarillo/ocre del cuerno y el hocico */
  --cor-papel:      #F6F2EC; /* texto claro */
  --cor-humo:       #9AA7B4; /* texto secundario */

  /* ===== Humo de fondo — ronda 4 (ENCARGO-4.md §2.4), una mancha por capa ===== */
  /* Cada tinte mezcla UN acento sobre la base neutra (--cor-tinta-2, el negro elevado de
     las tarjetas) — nunca los tres colores de marca al mismo peso en el mismo bloque
     (regla de paleta, §4 del brief). Los dos azules comparten fuente (--cor-azul-hondo,
     no hay otro azul en la lista de §2.4) pero a distinta proporción: "azul" es el tinte
     normal de #historia/#ubicacion; "azul hondo" es la variante más apagada que pide el
     encargo para #portada y el pie, las dos capas más oscuras/neutras de la página. */
  /* Corregido tras medir píxeles en Chrome sin cabeza: la primera versión mezclaba cada
     tinte CONTRA --cor-tinta-2, así que --humo-azul resolvía a rgb(14,35,52), un azul casi
     negro. En `screen` sobre un fondo rgb(7,9,13) y al 16–37% de opacidad, eso subía el
     verde 3 unidades y el azul 7 sobre 255: humo invisible. Las seis secciones medían
     exactamente (7,9,13) de borde a borde en la captura de página completa.
     El humo de verdad es CLARO — la propia pintura lo dice: el toro echa una bocanada
     blanca por el hocico, y ésa es la referencia. Ahora cada tinte se construye sobre
     --cor-humo (el gris azulado del texto secundario) teñido con el acento de su capa, y
     lo que cambia entre capas es el color, no la luminosidad. El reparto por capa no se
     toca: azul en #historia/#ubicacion, rosa en #menu/#contacto, amarillo en #resenas y la
     variante apagada en #portada y el pie, que son las dos capas más neutras. */
  /* Ronda 8. El dueño pasó su vídeo de marca: dos toros negros reales sobre negro puro,
     con polvo levantado por el que embiste. Ahí no hay nada teñido, y el humo de colores
     de las rondas 4-6 se veía postizo al lado del material real. Los cuatro tintes pasan a
     ser grises de humo, con una diferencia mínima de temperatura entre tramos para que el
     recorrido siga notándose sin que nadie vea «una sección rosa». */
  --humo-azul:        color-mix(in srgb, var(--cor-humo) 88%, var(--cor-azul) 12%);
  --humo-azul-hondo:  color-mix(in srgb, var(--cor-humo) 72%, var(--cor-azul-hondo) 28%);
  --humo-rosa:        color-mix(in srgb, var(--cor-humo) 90%, var(--cor-rosa) 10%);
  --humo-amarillo:    color-mix(in srgb, var(--cor-humo) 88%, var(--cor-amarillo) 12%);

  /* ===== Espaciado — escala de 4px ===== */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;

  /* Alto de la barra fija: referencia para scroll-margin-top y el padding del hero */
  --nav-alto: 72px;

  /* Ronda 3: hook para `frontend`, no lo usa nadie en esta hoja. Si al reencuadrar el vídeo
     del héroe (§3 del brief, geometría corregida) hace falta desplazar el recorte en
     vertical para que el hocico quede dentro de pantalla en formatos anchos, este token
     centraliza ese ajuste en vez de un número suelto en el `object-position` o `transform`
     en línea de `index.html`. Por ejemplo: `object-position: 85% calc(54% + var(
     --portada-desplazamiento))`. Valor neutro (sin efecto) hasta que frontend lo necesite y
     lo ajuste — la geometría exacta es suya, no se adivina aquí. */
  --portada-desplazamiento: 0%;

  /* ===== Radios ===== */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-pill: 999px;

  /* ===== Sombras (pensadas sobre fondo oscuro) ===== */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 20px 48px rgba(0, 0, 0, 0.55);

  /* ===== Duraciones y curva de transición ===== */
  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-lenta: 450ms;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Tipografía — familias ===== */
  /* Display serif: titulares, eco del "CORNELIA" en caja alta del logo */
  --fuente-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* Sans de cuerpo: texto corrido, botones, UI */
  --fuente-cuerpo: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* ===== Tipografía — escala fluida (clamp: respira de 320px a escritorio) ===== */
  --tipo-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --tipo-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --tipo-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --tipo-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --tipo-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --tipo-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --tipo-display: clamp(2.5rem, 1.8rem + 4vw, 5rem);
  --tipo-display-lg: clamp(3rem, 2rem + 6vw, 7rem);

  --linea-ajustada: 1.1;
  --linea-normal: 1.5;
  --linea-holgada: 1.7;

  --letra-ancha: 0.12em;
}