/* ============================================================
   FRAMEWORK PERSONAL — tokens.css
   Custom properties consolidadas de studioweb, andurinas y corso.
   Reskin de un proyecto = cambiar SOLO este archivo (bloque
   "IDENTIDAD" de abajo). El resto del framework no se toca.

   Uso: <link rel="stylesheet" href="framework/tokens.css">
   SIEMPRE antes de animations.css y de los componentes.

   ── RESKIN DE ESTE PROYECTO: The 72 HORAS (v5 — capa luxury) ──
   Blanco / azul / rojo + acento dorado, tipografía grande, temática
   de juego con acabado premium, radius suave. Ver CLAUDE.md →
   "Dirección visual".

   Extensiones NO presentes en el framework base:
   - --accent-urgent (rojo): el framework asume un solo acento y aquí
     hacen falta dos tonos (azul = marca/nav, rojo = urgencia puntual:
     ticker, CTA principal, badges).
   - --accent-luxe (dorado): capa premium — header/ticker/footer
     oscuros, subrayados de nav, anillo de los sellos, divisores de
     sección, glow en hover de cards. Sustituye al antiguo
     --accent-star (unificado en un solo dorado, no dos casi iguales).
   Si se resincroniza este archivo contra el framework maestro,
   conservar estos dos bloques.
   ============================================================ */

:root {
  /* ── IDENTIDAD — 72 HORAS (negro / rojo / blanco, sobrio) ────── */
  --bg: #0A0A0B;
  --bg-2: #121214;
  --bg-3: #17171A;
  --bg-surface: #131316;

  --text: #F4F4F5;
  --text-muted: #A6A6AD;
  --text-dim: #6E6E76;

  /* Rojo = único acento de fuerza (CTA, resaltados, urgencia) */
  --accent: #E11B22;
  --accent-light: rgba(225, 27, 34, 0.14);
  --accent-dim: rgba(225, 27, 34, 0.10);
  --accent-glow: rgba(225, 27, 34, 0.26);

  --accent-urgent: #E11B22;
  --accent-urgent-deep: #B3141A;
  --accent-urgent-light: rgba(225, 27, 34, 0.14);

  /* "luxe" reconvertido: en vez de dorado, blanco/gris sobrio — así el
     rojo queda reservado para los CTA y los detalles (logo, divisores,
     anillos de sello) son sutiles en blanco, no compiten con el rojo. */
  --accent-luxe: #EDEDF0;
  --accent-luxe-deep: #C6C6CC;
  --accent-luxe-soft: rgba(255, 255, 255, 0.10);

  --border: rgba(255, 255, 255, 0.10);
  --border-mid: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(225, 27, 34, 0.35);

  /* Archivo = grotesca fuerte y sobria (nada de serif de lujo aquí).
     Todo lo que usa var(--font-display) (h1, h3, precio, nav mobile)
     pasa a este carácter serio de "manual de campo". */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Radio pequeño = look sobrio/serio, no de juego. */
  --radius: 6px;
  --radius-lg: 10px;

  /* ── ESTRUCTURA (rara vez cambia entre proyectos) ──────────── */
  --header-h: 72px;
  /* Extensión propia de 72 HORAS — alto de la franja de ticker
     fija sobre el header (el framework no asume un ticker fijo).
     44px desde v11 (antes 38px) — ticker más grande/urgente, ver
     app.css sección 1. */
  --ticker-h: 44px;
  --max-w: 1160px;
  --max-w-wide: 1400px;

  /* Easing consolidado — el mismo en los 3 proyectos con variación
     mínima de decimales. Este es el valor canónico del framework. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── SPACING SCALE (rem) ────────────────────────────────────── */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* --section-pad-y reducido a la mitad (pedido de Tom: demasiado
     espacio negativo entre secciones/subsecciones en todo el sitio).
     Controla tanto .section (index.html) como .blog-article
     (the-72h-in-concrete-full-history.html) — mismo token, mismo
     espaciado en las dos páginas por diseño. */

  /* Padding de sección — clamp fluido, igual en los 3 proyectos.
     Reducido a la mitad en este proyecto (v22, mucho espacio negativo). */
  --section-pad-y: clamp(1.5rem, 3.5vh, 2.75rem);
  --section-pad-x: 2.5rem;

  /* ── SOMBRAS Y GLASS ────────────────────────────────────────── */
  --shadow-header: 0 1px 32px rgba(11, 18, 32, 0.08);
  --shadow-card: 0 20px 50px rgba(11, 18, 32, 0.10);
  --shadow-float: 0 8px 30px rgba(11, 18, 32, 0.22);

  --glass-bg: rgba(10, 10, 11, 0.86);
  --glass-blur: blur(16px);

  /* ── Z-INDEX (escala documentada, evita números mágicos) ──── */
  --z-header: 100;
  --z-mobile-nav: 99;
  --z-float: 900;
  --z-modal: 1000;
  --z-cursor: 99998;
  --z-toast: 9300;

  /* ── BREAKPOINTS DE REFERENCIA (documentación, no funcionales
     en CSS puro — usar estos valores literales en @media) ──────
     --bp-xs: 480px    móvil pequeño
     --bp-sm: 600px    móvil grande
     --bp-md: 768px    tablet vertical
     --bp-lg: 860px    punto de corte nav desktop/mobile
     --bp-xl: 1024px   tablet horizontal / desktop pequeño
  */
}

/* ── RESET MÍNIMO ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  overflow-x: hidden;
  /* Base subida de 16px a 18px (proyecto 72 HORAS, v11) — escala
     todo lo que usa rem (h1, h2, cards, botones, nav) ~12.5% más
     grande de golpe, pedido explícito de Tom para que se lea más
     comercial/agresivo. Los tamaños en px sueltos (ticker, badges,
     legal) no escalan con esto — se subieron a mano donde hacía falta. */
  font-size: 18px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}
button {
  font-family: inherit;
  touch-action: manipulation;
  cursor: pointer;
}

/* Scrollbar de marca — consistente en los 3 proyectos */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}