/*
 * tokens.css
 * Design tokens centralizados.
 * Editar aquí para propagar cambios visuales a todo el tema.
 * Mismos valores que :root en style.css — este archivo garantiza
 * que el cascade funcione independientemente del orden de carga.
 */

:root {

  /* ── COLORES ─────────────────────────── */
  --c-black:       #080808;
  --c-black-soft:  #0f0f0f;
  --c-black-mid:   #151515;
  --c-black-lift:  #1c1c1c;
  --c-surface:     #111111;
  --c-surface-2:   #181818;

  --c-white:       #f4f4f2;
  --c-white-dim:   #a8a8a4;
  --c-white-muted: #5a5a58;

  --c-red:         #c0000a;
  --c-red-deep:    #8f0007;
  --c-red-line:    #b50008;

  --c-border:      rgba(255, 255, 255, 0.07);
  --c-border-mid:  rgba(255, 255, 255, 0.12);
  --c-border-red:  rgba(192, 0, 10, 0.35);

  /* ── TIPOGRAFÍA ──────────────────────── */
 --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --size-xs:   0.6875rem;
  --size-sm:   0.8125rem;
  --size-base: 1rem;
  --size-md:   1.125rem;
  --size-lg:   1.375rem;
  --size-xl:   1.75rem;
  --size-2xl:  2.25rem;
  --size-3xl:  3rem;
  --size-4xl:  4rem;
  --size-hero: clamp(3.25rem, 7.5vw, 6.5rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-base:   -0.015em;
  --tracking-wide:   0.07em;
  --tracking-wider:  0.14em;
  --tracking-widest: 0.22em;

  /* ── ESPACIADO ───────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── LAYOUT ──────────────────────────── */
  --max-width:    1280px;
  --max-width-sm: 960px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --section-py:   clamp(4rem, 8vw, 7rem);

  /* ── BORDES / RADIO ──────────────────── */
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-lg:   8px;

  /* ── TRANSICIONES ────────────────────── */
  --t-fast:  150ms ease;
  --t-base:  250ms ease;
  --t-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-crawl: 650ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── RED LINE ────────────────────────── */
  --red-line-h: 2px;
  --red-line-c: var(--c-red-line);
}