/* ==========================================================================
   NANO — Design tokens
   Única fuente de verdad para color, tipografía, espaciado y motion.
   Cualquier cambio de marca empieza (y en general termina) en este archivo.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color — superficies
     ------------------------------------------------------------------ */
  --ink:          #0E0E10;  /* fondo base del sitio */
  --surface:      #16161A;  /* placeholders de imagen, hover de celdas */
  --bone:         #EDE9E1;  /* color de texto principal */
  --paper:        #FFFFFF;  /* fondo claro: columna de piezas en los casos */

  /* ------------------------------------------------------------------
     Color — acentos del sistema cromático
     Cada frente de trabajo tiene su acento. Ver footer del sitio.
     ------------------------------------------------------------------ */
  --accent:       #FF9726;  /* Identidad & Branding */
  --accent-ci:    #96C800;  /* Comunicación Interna & Cultura */
  --accent-dg:    #C0BEFF;  /* Diseño Digital & Web */

  /* ------------------------------------------------------------------
     Color — escala de texto (opacidades de --bone)
     De más a menos presencia. Usar el token semántico, no el rgba crudo.
     ------------------------------------------------------------------ */
  --text:         rgb(237 233 225);
  --text-strong:  rgb(237 233 225 / 0.90);
  --text-body:    rgb(237 233 225 / 0.78);
  --text-muted:   rgb(237 233 225 / 0.70);
  --text-dim:     rgb(237 233 225 / 0.55);
  --text-faint:   rgb(237 233 225 / 0.45);
  --text-ghost:   rgb(237 233 225 / 0.40);

  /* ------------------------------------------------------------------
     Color — líneas y bordes
     ------------------------------------------------------------------ */
  --line-soft:    rgb(237 233 225 / 0.10);  /* divisor entre secciones */
  --line:         rgb(237 233 225 / 0.12);  /* divisor de listas */
  --line-mid:     rgb(237 233 225 / 0.14);  /* divisor con más peso */
  --line-box:     rgb(237 233 225 / 0.16);  /* borde de tarjetas */
  --line-strong:  rgb(237 233 225 / 0.20);  /* cabecera de tabla */
  --line-pill:    rgb(237 233 225 / 0.22);  /* borde de pill inactiva */
  --line-input:   rgb(237 233 225 / 0.28);  /* borde inferior de input */
  --line-btn:     rgb(237 233 225 / 0.30);  /* borde de botón outline */

  /* Estados de superficie */
  --hover-row:    rgb(237 233 225 / 0.05);
  --hover-cell:   rgb(237 233 225 / 0.035);

  /* ------------------------------------------------------------------
     Tipografía — familias
     Display : Gothiks (titulares, cifras, nombres)
     Body    : Archivo             (párrafos, texto corrido)
     Mono    : JetBrains Mono      (etiquetas, metadatos, UI)
     ------------------------------------------------------------------ */
  --font-display: 'Gothiks', Helvetica, Arial, sans-serif;
  --font-body:    Archivo, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Pesos de display en uso */
  --w-light:      300;  /* citas */
  --w-medium:     400;  /* titulares de sección, nombres */
  --w-bold:       800;  /* display grande, cifras de resultado */

  /* ------------------------------------------------------------------
     Tipografía — escala fluida
     ------------------------------------------------------------------ */
  --fs-hero:      clamp(48px, 11.2vw, 186px);  /* h1 de portada */
  --fs-page:      clamp(40px, 8vw,   132px);   /* h1 de página interior */
  --fs-case:      clamp(38px, 7.4vw, 122px);   /* h1 de caso */
  --fs-cta:       clamp(34px, 7.6vw, 120px);   /* enlace CTA final */
  --fs-h2:        clamp(30px, 4.4vw,  62px);
  --fs-h3:        clamp(28px, 3.6vw,  52px);
  --fs-h4:        clamp(22px, 2.4vw,  36px);
  --fs-stat:      clamp(32px, 3.4vw,  50px);   /* cifras de estadística */
  --fs-result:    clamp(30px, 3.2vw,  46px);   /* cifras de resultado */
  --fs-row:       clamp(20px, 2.6vw,  38px);   /* fila de índice */
  --fs-next:      clamp(26px, 4vw,    56px);   /* caso siguiente */

  --fs-lead:      clamp(16px, 1.3vw,  20px);   /* párrafo destacado */
  --fs-lead-sm:   clamp(15px, 1.35vw, 19px);
  --fs-brief:     clamp(17px, 1.6vw,  24px);   /* el encargo */
  --fs-quote:     clamp(18px, 1.7vw,  24px);

  /* ------------------------------------------------------------------
     Espaciado — padding horizontal de página (constante en todo el sitio)
     ------------------------------------------------------------------ */
  --pad-x:        clamp(20px, 4vw, 56px);

  /* Ritmo vertical de secciones */
  --pad-y-xl:     clamp(72px, 10vw, 160px);
  --pad-y-lg:     clamp(72px, 10vw, 150px);
  --pad-y-md:     clamp(48px,  7vw, 110px);
  --pad-y-sm:     clamp(40px,  6vw,  90px);

  /* Separación entre columnas de grid */
  --gap-col:      clamp(32px, 5vw, 80px);

  /* Altura del header fijo. .site-header la aplica como height, así que este
     valor es la medida real: de él dependen la compensación de scroll de las
     páginas interiores y el tope de los elementos sticky bajo la cabecera. */
  --header-h:     72px;

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);  /* entradas y expansiones */
  --t-fast:       0.25s;
  --t-mid:        0.35s;
  --t-slow:       0.6s;

  /* ------------------------------------------------------------------
     Capas (z-index)
     ------------------------------------------------------------------ */
  --z-header:     70;
  --z-noise:      80;
  --z-progress:   90;
  --z-lightbox:   100;  /* visor de piezas, por encima de todo */
  --z-peek:       60;
}