/* =====================================================================
   RANGO CREATIVE STUDIO — Design tokens

   FUENTE DE VERDAD DEL COLOR. Ningún otro archivo puede escribir un hex
   de marca: los componentes consumen var(--…). Esa es la única defensa
   contra tener dos paletas mezcladas. Verificable con:
     python3 tools/guardrail-color.py

   Paleta = la del sitio en producción (rangocreativestudio.com), extraída
   de `src/` del export de Horizons por frecuencia de uso. Decisión del
   cliente el 2026-07-09: el sitio anterior es la referencia principal.
   Sustituye a la paleta del brochure (#282828 / #FFFFFB) que usamos antes.
   ===================================================================== */

:root {
  /* ---- COLOR: marca ---- */
  --red:        #DB0D15;   /* acento primario — 217 usos en el original */
  --bg:         #0C0D0D;   /* fondo de página — 31 usos */
  --ink:        #FFFFFF;   /* texto principal, blanco puro (Tailwind text-white) */

  /* ---- COLOR: derivados ---- */
  /* ═══ EXCEPCIÓN DELIBERADA — NO UNIFICAR ═══════════════════════════
     Negro cálido del brochure oficial. Decisión de Sebastian el
     2026-07-09, tras comparar ambos fondos en captura: se usa
     ÚNICAMENTE como fondo de la sección Nosotros/credo de la home,
     vía la clase `.section--warm`. El Hero se quedó en #0C0D0D.
     NO es un descuido ni un resto de la paleta anterior. `--bg` sigue
     siendo #0C0D0D y manda en todo el resto del sitio.
     Antes de "arreglarlo", lee la nota del SKILL.md.                */
  --bg-warm:    #282828;

  --red-dark:   #B00A11;   /* rojo hover/pressed — 12 usos */
  --red-soft:   rgba(219, 13, 21, 0.10);  /* washes/highlights */
  --bg-elev:    #191717;   /* superficies: cards y bandas de sección — 43 usos */
  --line:       #353535;   /* bordes y divisores — 61 usos. Gris sólido, no alfa */
  --line-faint: #252525;   /* pista de la barra del preloader — 6 usos */
  --line-strong:var(--red);

  /* Grises de texto: vienen de las clases Tailwind del original.
     OJO: --ink-faint (gray-500) da 4.03:1 sobre --bg → falla AA para texto
     normal. Es fiel al original y se usa solo en etiquetas pequeñas en
     mayúsculas. No usarlo para párrafos. */
  --ink-muted:  #9CA3AF;   /* gray-400 — 7.67:1 sobre --bg, pasa AA */
  --ink-faint:  #6B7280;   /* gray-500 — 4.03:1 sobre --bg, ver aviso arriba */
  --ink-dim:    #4B5563;   /* gray-600 — 2.58:1. SOLO decorativo: el "STUDIO." del hero.
                              Nunca para texto que haya que leer. */

  /* ---- COLOR: marca AJENA ----
     #25D366 es el verde de WhatsApp, no de Rango. Vive aquí porque el
     guardrail prohíbe hex sueltos en cualquier otro archivo, no porque
     forme parte de la paleta. Úsalo SOLO para identificar el canal de
     WhatsApp. Contraste medido: 9.00:1 sobre --bg-elev, 9.81:1 sobre --bg. */
  --wa:      #25D366;
  --wa-wash: rgba(37, 211, 102, 0.10);

  /* Nota: --bg-sink se retiró. En el original la jerarquía se invierte
     (la página es lo más oscuro y las superficies suben), así que no hay
     nada "más hundido" que --bg. Sus usos migraron a --bg-elev. */

  /* ---- TIPOGRAFÍA ---- */
  /* SWAP futuro: cambiar 'Bebas Neue' por 'SinkRegular' al confirmar licencia */
  --font-display: 'Bebas Neue', 'Archivo Black', Impact, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- ESCALA TIPOGRÁFICA (fluida) ---- */
  --fs-100: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);   /* captions */
  --fs-200: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);      /* small */
  --fs-300: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);       /* body */
  --fs-400: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);      /* lead */
  --fs-500: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);         /* h3 */
  --fs-600: clamp(2.6rem, 1.8rem + 4vw, 4.5rem);         /* h2 */
  --fs-700: clamp(3.6rem, 2rem + 8vw, 7rem);             /* h1 */
  --fs-800: clamp(4.5rem, 2rem + 13vw, 10rem);           /* hero display */

  --lh-display: 0.9;    /* titulares condensados apretados */
  --lh-body:    1.6;
  --tracking-display: -0.01em;
  --tracking-caps:    0.2em;   /* etiquetas en mayúsculas */

  /* ---- ESPACIADO ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --container: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- BORDES ---- */
  --bw:        4px;    /* grosor de línea de marca */
  --bw-thin:   2px;
  --bw-thick:  8px;    /* marco del CTA de cierre de la home (CTA.jsx:17) */
  --radius:    0;      /* cero radios, siempre */

  /* ---- MOVIMIENTO ---- */
  --dur-fast:  0.2s;
  --dur:       0.4s;
  --dur-slow:  0.7s;
  /* Es el mismo cubic-bezier que usaba Framer Motion en el original */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- OTROS ---- */
  --shadow-hard: 8px 8px 0 0 rgba(0, 0, 0, 0.9);
  /* Sombra dura roja del panel de contacto (Contact.jsx:335). Va aquí, y no
     en contacto.css, porque descompone --red en canales: es el mismo hex. */
  --shadow-red:  8px 8px 0 0 rgba(219, 13, 21, 0.15);
  /* Rejilla roja de 50px del hero de contacto, al 6% (Contact.jsx:106-113) */
  --grid-red:    rgba(219, 13, 21, 0.06);
  --z-header: 100;
  --z-overlay: 200;
  --z-preloader: 300;
  --z-cursor: 9998;
}