/* ============================================================
   GUARDA-SAFE — Design tokens
   Sistema calcado de la referencia: una constante (3px) y un
   acento (naranja de las puertas de los contenedores).
   ============================================================ */

:root {
  /* Color — estrategia comprometida: blanco base, carbón de
     contenedor, un solo naranja que hace todo el trabajo */
  --c-orange: #FD5100;                        /* naranja exacto del logo */
  --c-orange-soft: oklch(78% 0.14 45);        /* hover texto pequeño sobre carbón */
  --c-charcoal: oklch(35.6% 0 0);             /* pared de contenedor */
  --c-charcoal-deep: #282828;                 /* gris exacto del logo — footer */
  --c-grid: oklch(84% 0 0);                   /* hr capítulos, notas sobre carbón */
  --c-cell: oklch(94.5% 0 0);                 /* celdas de la retícula del hero */
  --c-card: oklch(97% 0 0);                   /* tarjeta infográfica */
  --c-ink: #282828;                           /* gris oscuro del logo, nunca negro puro */
  --c-paper: oklch(100% 0 0);
  --c-muted: oklch(40% 0 0);                  /* créditos y captions — ≥4.5:1 sobre card */
  --c-whatsapp: oklch(70.5% 0.181 152);       /* botón flotante WA */

  /* La constante universal */
  --line: 3px;

  /* Tipografía — Geologica (la fuente del logo) en dos pesos extremos:
     cuerpo thin (200) con acentos ultra bold, como el referente */
  --font: "Geologica", "Archivo", system-ui, sans-serif;
  --w-light: 200;
  --w-small: 300;                             /* legibilidad en textos pequeños */
  --w-black: 900;

  --text-hero: clamp(3.2rem, 9vw, 6rem);
  --text-band: clamp(2.4rem, 6vw, 5.5rem);
  --text-band-sm: clamp(1.9rem, 4.5vw, 4rem);
  --text-reading: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --text-pill: 1.2rem;                        /* ≥19px bold: blanco/naranja pasa AA-large */
  --text-caption: 0.9rem;

  /* Radios del sistema */
  --r-pill: 35px;
  --r-card: 58px;
  --r-chip: 12px;

  /* Líneas conectoras = ritmo vertical */
  --line-long: 10rem;
  --line-short: 5rem;

  /* Motion */
  --t-snap: 0.09s linear;                     /* hovers duros de la referencia */
  --t-reveal: 0.55s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index semántico */
  --z-content: 1;
  --z-nav: 10;
  --z-float: 20;
}