/* ═══════════════════════════════════════════════════════════════════════
   TOKENS — la única fuente de verdad del diseño.
   Cambiá algo acá y cambia en todo el sitio.
   ═══════════════════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    /* ── Color: la paleta "sala de máquinas" ───────────────────────── */
    --void: #06080a; /* fondo más profundo */
    --soot: #0b0f12; /* fondo de página */
    --pitch: #10161a; /* superficie elevada */
    --felt: #141d1b; /* superficie de tarjeta */
    --edge: #22302c; /* borde normal */
    --edge-hi: #3a4d47; /* borde resaltado */

    --bone: #e9e2ce; /* texto principal */
    --bone-2: #a9a596; /* texto secundario */
    --bone-3: #6d7570; /* texto terciario / deshabilitado */

    --sodium: #f0a63c; /* acento principal (lámpara de sodio) */
    --sodium-hi: #ffc46b;
    --sodium-deep: #a35f16;
    --blood: #cf3a2c; /* peligro / destacado caliente */
    --blood-deep: #6d1a13;
    --mercury: #79d3bd; /* éxito / frío */
    --mercury-deep: #1d4a41;

    /* Derivados: color-mix evita tener 40 variables casi iguales */
    --sodium-soft: color-mix(in oklab, var(--sodium) 14%, transparent);
    --sodium-line: color-mix(in oklab, var(--sodium) 38%, transparent);
    --mercury-soft: color-mix(in oklab, var(--mercury) 12%, transparent);
    --scrim: color-mix(in oklab, var(--void) 82%, transparent);

    /* ── Tipografía ────────────────────────────────────────────────────
       Sin fuentes externas: cero peticiones a terceros, cero rastreo.
       El stack busca una condensada pesada tipo marquesina de arcade. */
    --font-display: "Big Shoulders Stencil Display", "Oswald",
      "Haettenschweiler", "Arial Narrow", Impact, "Franklin Gothic Bold",
      system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono",
      Menlo, Consolas, "Liberation Mono", monospace;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
      Arial, sans-serif;

    /* Escala fluida: se adapta sola entre móvil y escritorio */
    --step--1: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
    --step-0: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
    --step-1: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
    --step-2: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem);
    --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
    --step-4: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
    --step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem);

    --tracking-wide: 0.16em;
    --tracking-wider: 0.26em;

    /* ── Espaciado ─────────────────────────────────────────────────── */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;

    /* ── Estructura ────────────────────────────────────────────────── */
    --width-page: 82rem;
    --width-prose: 40rem;
    --header-h: 3.75rem;
    --radius: 2px; /* casi recto: estética de chapa y placa metálica */
    --radius-lg: 4px;
    --border: 1px solid var(--edge);

    /* ── Sombras y luz ─────────────────────────────────────────────── */
    --shadow-s: 0 2px 10px rgb(0 0 0 / 0.5);
    --shadow-m: 0 10px 30px -12px rgb(0 0 0 / 0.8);
    --shadow-l: 0 26px 60px -24px rgb(0 0 0 / 0.9);
    --glow-sodium: 0 0 32px -8px color-mix(in oklab, var(--sodium) 70%, transparent);

    /* ── Movimiento ────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.2, 1.35, 0.4, 1);
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 420ms;

    /* ── Capas ─────────────────────────────────────────────────────── */
    --z-grain: 1;
    --z-header: 50;
    --z-overlay: 80;
    --z-toast: 90;

    color-scheme: dark;
    accent-color: var(--sodium);
  }

  /* Menos movimiento para quien lo pidió en su sistema. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 1ms;
      --dur: 1ms;
      --dur-slow: 1ms;
    }
  }

  /* Más contraste para quien lo pidió en su sistema. */
  @media (prefers-contrast: more) {
    :root {
      --bone-2: #d2ccbb;
      --bone-3: #a9a596;
      --edge: #47605a;
      --edge-hi: #7a938c;
    }
  }
}