/* ============================================================================
   VRSN — DESIGN TOKENS
   Every value here is traceable to the brand manual. Measured, not invented.
   Source: "MANUAL DE MARCA VRSN" (49pp).
   ========================================================================== */

/* --- TYPEFACES ---------------------------------------------------------- */
/* Archivo carries wdth 62–125 + wght 100–900 in ONE 88KB file. It stands in
   for Rawhide Raw (the manual's display face), which has no web licence.     */
@font-face {
  font-family: 'Archivo';
  src: url('/public/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block; /* display type must never swap — it's the first frame */
}
@font-face {
  font-family: 'Montserrat';
  src: url('/public/fonts/montserrat-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/public/fonts/spacemono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/public/fonts/spacemono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- COLOR ------------------------------------------------------------ */
  /* Official red, sampled from all three logo assets on the RECURSOS page.  */
  --red: #E01212;
  --red-deep: #7A1310;      /* its shadow value, found in the photography    */
  --red-glow: #FF2A1F;
  /* El rojo de marca sobre el negro da 4.05:1 — se queda corto para texto
     pequeño (AA pide 4.5). El rojo brasa, que ya está en la paleta, da 5.3:1.
     Así que: --red pinta, --red-text se lee. Ningún color nuevo inventado. */
  --red-text: #FF2A1F;

  /* The manual's black is warm, not neutral: #110C0E measured across 41
     photographs. Screen-deepened one step for true blacks on OLED.          */
  --ink: #0A0709;
  --ink-2: #110C0E;
  --ink-3: #1A1416;
  --ink-4: #241D20;

  /* Neutrals, measured from the photography k-means                          */
  --bone: #E8E6E1;
  --bone-dim: #BEBCB5;
  --taupe: #918981;
  --slate: #2B3943;         /* cool shadow tone of the urban imagery          */
  --slate-2: #5E6265;

  /* The rare accent: the blue sky of the "floating" hero image              */
  --sky: #639BD5;

  --fg: var(--bone);
  --fg-dim: color-mix(in oklab, var(--bone) 55%, transparent);
  --fg-faint: color-mix(in oklab, var(--bone) 26%, transparent);
  --bg: var(--ink);
  --line: color-mix(in oklab, var(--bone) 14%, transparent);
  --line-soft: color-mix(in oklab, var(--bone) 8%, transparent);

  /* --- TYPE SCALE ------------------------------------------------------- */
  --f-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-text: 'Montserrat', system-ui, -apple-system, sans-serif;
  --f-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;

  /* Display = wide + heavy + tight, exactly as the manual sets headlines.   */
  --wdth-display: 118;
  --wght-display: 800;

  --step--2: clamp(0.66rem, 0.63rem + 0.14vw, 0.74rem);
  --step--1: clamp(0.78rem, 0.74rem + 0.19vw, 0.88rem);
  --step-0:  clamp(0.92rem, 0.87rem + 0.24vw, 1.05rem);
  --step-1:  clamp(1.12rem, 1.02rem + 0.48vw, 1.44rem);
  --step-2:  clamp(1.5rem, 1.26rem + 1.2vw, 2.3rem);
  --step-3:  clamp(2.1rem, 1.5rem + 3vw, 4rem);
  --step-4:  clamp(3rem, 1.4rem + 8vw, 8rem);
  --step-5:  clamp(4rem, -1rem + 22vw, 17rem);
  /* The hero statement is set to FIT, not to bleed. Rather than tuning a vw
     figure (which breaks the moment the root font-size differs from 16px, as
     it does on some Android text-autosizing paths), the constraint is stated
     exactly: PERMITIRSE measures 7.285em in Archivo wdth118/wght800, so the
     type is derived from the width actually available to it. Fits by
     construction at every viewport; 7.45 is the safety divisor.
     The deliberate bleed lives on chapter indices, where it reads as intent. */
  --step-hero: min(calc((100vw - 2 * var(--gutter) - 6px) / 7.45), 15rem);

  /* --- SPACE ------------------------------------------------------------ */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.5rem;
  --sp-4: 2.5rem;  --sp-5: 4rem;     --sp-6: 6.5rem;
  --sp-7: 10rem;   --sp-8: 16rem;

  /* --- MOTION ------------------------------------------------------------ */
  /* "rápidas pero suaves, elegantes, con inercia, sin bounce."              */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* the house ease         */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);   /* for curtains & panels  */
  --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 240ms;
  --t-mid: 520ms;
  --t-slow: 900ms;
  --t-curtain: 1100ms;

  /* --- THE GRAPHIC SYSTEM ------------------------------------------------ */
  /* The manual's diagonal element, measured: stripe 116, pitch 130, ~44°.
     Perpendicular ratio 0.7234 → 83.9 / 94. Expressed as a scalable token.  */
  --slash-angle: 133.6deg;
  --slash-w: 0.893;                     /* duty cycle: stripe / pitch        */
  --slash-pitch: 94px;

  --rail-h: 58px;                       /* the HUD rail from chapter openers */
  --z-cursor: 9000; --z-curtain: 8000; --z-panel: 7000; --z-rail: 6000;
}

/* The brand world is dark. A light mode would contradict 61% of the
   photography, so the site has one world — but we honour forced-colors
   and reduced-motion, which are accessibility needs, not style choices.     */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-mid: 1ms; --t-slow: 1ms; --t-curtain: 1ms; }
}