/* ============================================================
   DESIGN TOKENS
   Dirección: monocromo puro, sin color de acento.
   La personalidad vive en la tipografía, el espacio y el
   contraste — no en el color.
   ============================================================ */

:root {
  /* ---- Superficie (modo oscuro por defecto) ---- */
  --color-bg: #0a0a0b;
  --color-bg-raised: #131315;
  --color-bg-hover: #1a1a1d;
  --color-border: #232326;
  --color-border-strong: #35353a;

  /* ---- Texto ---- */
  --color-text-primary: #f4f4f5;
  --color-text-secondary: #a6a6ad;
  --color-text-tertiary: #6b6b70;

  /* ---- "Acento" monocromo: blanco puro usado con disciplina ---- */
  --color-emphasis: #ffffff;
  --color-emphasis-bg: #ffffff;
  --color-emphasis-text: #0a0a0b;

  /* ---- Estados ---- */
  --color-focus: #ffffff;

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Escala tipográfica (clamp = fluida entre mobile y desktop) */
  --fs-hero: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  /* ---- Espaciado ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}

/* Modo claro — reservado; el sitio usa oscuro por defecto según el brief */
@media (prefers-color-scheme: light) {
  :root {
    /* Se mantiene oscuro intencionalmente (decisión de marca, no del SO) */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}