/* ==========================================================================
   RUT — VARIANTE OFICIAL · tokens.css
   Misma base que web-redesign/ (Fase 5 · ART-DIRECTION.md) pero con la
   identidad visual OFICIAL de rs-teatinos.com en vez de la paleta/tipografía
   propuestas en "TINTA Y SOL":
     · Azul  #0A1F44 → #001489 (azul corporativo real)
     · Sol   #FFC94D → #FFCD00 (amarillo corporativo real)
     · Tipografía: DIN Pro (Regular/Bold/Light, servida en local) sustituye
       a Fraunces + Plus Jakarta Sans + IBM Plex Mono en TODOS los roles.
   Este archivo NO contiene reglas de layout ni componentes: solo variables.
   Cárgalo SIEMPRE antes que base.css.
   ========================================================================== */

:root {

  /* --- Tipografía: familias (DIN Pro se sirve en local, ver @font-face
     en base.css). Sin itálica real: no hay archivo DIN Pro Italic. --- */
  --font-display: "DINPro-Bold", "Arial Black", Arial, sans-serif;
  --font-sans:    "DINPro-Regular", Arial, "Segoe UI", sans-serif;
  --font-mono:    "DINPro-Light", Arial, "Segoe UI", sans-serif;

  /* --- Escala tipográfica fluida (idéntica a la variante TINTA Y SOL) --- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);  /* mono/meta, small */
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);  /* body */
  --step-1:  clamp(1.25rem, 1.17rem + 0.42vw, 1.50rem);  /* lead, H4 */
  --step-2:  clamp(1.56rem, 1.41rem + 0.76vw, 2.00rem);  /* H3 */
  --step-3:  clamp(1.95rem, 1.68rem + 1.35vw, 2.66rem);  /* H2 */
  --step-4:  clamp(2.44rem, 1.98rem + 2.30vw, 3.55rem);  /* H2 destacado */
  --step-5:  clamp(3.05rem, 2.31rem + 3.71vw, 4.73rem);  /* H1 sección */
  --step-6:  clamp(3.81rem, 2.66rem + 5.79vw, 6.31rem);  /* H1 home / capítulos */
  --step-7:  clamp(4.77rem, 3.02rem + 8.77vw, 9.00rem);  /* "RUT" gigante, cifras hero */

  /* --- Reglas tipográficas de apoyo --- */
  --leading-display: 1.04;          /* DIN Pro Bold: algo más apretado que Fraunces */
  --leading-body: 1.6;
  --tracking-display: -0.005em;     /* DIN Pro no necesita el tracking negativo de Fraunces */
  --tracking-mono: 0.06em;          /* eyebrows / metadatos, siempre MAYÚSCULAS */
  --measure: 65ch;                  /* ancho máximo de columna de lectura */

  /* --- Sistema de color: paleta OFICIAL rs-teatinos.com --- */
  --ink:           #001489;  /* azul corporativo oficial (antes #0A1F44) */
  --ink-deep:      #000E5C;  /* variante más oscura para footer/fondos ultra-oscuros */
  --indigo:        #001489;  /* marca activa: enlaces, botones primarios (unificado con --ink) */
  --indigo-bright: #3355C2;  /* acentos sobre navy — solo decorativo o texto grande */
  --sol:           #FFCD00;  /* amarillo corporativo oficial (antes #FFC94D) */
  --sol-hover:     #FFD633;
  --paper:         #F5F7FC;  /* fondo base alternativo (frío) */
  --paper-warm:    #FFF8EA;  /* fondo cálido: secciones "sol" */
  --mist:          #EEF1FC;  /* tarjetas, campos de formulario */
  --line:          #E3E7F1;  /* filetes, bordes 1px */
  --gray-text:     #5B6373;  /* texto secundario, pies de foto */
  --white:         #FFFFFF;

  /* Derivados translúcidos (filetes sobre fondos de tinta / velos) */
  --ink-20:        rgba(0, 20, 137, 0.20);   /* filetes sobre claro */
  --white-20:      rgba(255, 255, 255, 0.20);/* filetes sobre tinta */
  --white-60:      rgba(255, 255, 255, 0.60);

  /* --- Retícula y espacio (idéntica a la variante TINTA Y SOL) --- */
  --grid-cols: 12;
  --gutter: clamp(16px, 2.5vw, 32px);
  --content-max: 1360px;
  --margin-page: clamp(20px, 5vw, 80px);
  --space-section: clamp(80px, 12vh, 160px);   /* separación vertical entre secciones */
  --space-block: clamp(40px, 6vh, 80px);       /* separación entre bloques internos */
  --space-cluster: clamp(12px, 2vh, 24px);     /* denso, dentro de clusters editoriales */

  /* --- Radios --- */
  --radius-0: 0;
  --radius-s: 4px;      /* máximo permitido en fotos y tarjetas */
  --radius-pill: 999px; /* solo botones */

  /* --- Bordes y filetes --- */
  --rule: 1px solid var(--line);
  --rule-ink: 1px solid var(--ink-20);
  --rule-inverse: 1px solid var(--white-20);

  /* --- Motion: nada > 700ms, solo transform/opacity --- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 500ms;   /* subrayado firma */
  --dur-slow: 600ms;  /* zoom de foto, reveals */
  --stagger: 80ms;

  /* --- Foco visible --- */
  --focus-ring: 3px solid var(--sol);
  --focus-ring-inverse: 3px solid var(--white);
  --focus-offset: 2px;

  /* --- Capas --- */
  --z-header: 100;
  --z-skip: 200;
  --z-float: 90;

  /* --- Header --- */
  --header-h: 84px;
  --header-h-compact: 64px;

  /* --- Área táctil mínima --- */
  --tap-min: 44px;
}