/* ==========================================================================
   Tokens de diseño — GENERADO por scripts/generate-tokens.mjs. No editar a mano
   la paleta; los alias semánticos se ajustan en el script.
   ========================================================================== */

/* Orden de capas de todo el tema: este archivo se carga primero */
@layer reset, tokens, base, layout, components, sections, utilities;

@layer tokens {
:root {
  /* Paleta (1:1 con Framer) */
  --palette-black: rgb(0 0 0);
  --palette-medium-gray: rgb(110 110 110);
  --palette-jet-gray: rgb(41 41 41);
  --palette-slate-gray: rgb(153 153 153);
  --palette-dark-gray: rgb(27 27 27);
  --palette-light-gray: rgb(206 206 206);
  --palette-mercury: rgb(231 231 231);
  --palette-whisper-gray: rgb(238 238 238);
  --palette-dim-gray: rgb(153 153 153);
  --palette-dusty-gray: rgb(153 153 153);
  --palette-white: rgb(255 255 255);
  --palette-charcoal-gray: rgb(51 51 51);
  --palette-silver-gray: rgb(187 187 187);
  --palette-charcoal-black: rgb(38 38 38);
  --palette-jet-black: rgb(14 14 14);
  --palette-ash-gray: rgb(69 69 69);
  --palette-carbon-black: rgb(43 43 43);
  --palette-graphite-black: rgb(29 29 29);
  --palette-ink-black: rgb(12 12 12);
  --palette-smoky-black: rgb(47 47 47);
  --palette-white-7: rgb(255 255 255 / 7%);
  --palette-white-10: rgb(255 255 255 / 10%);
  --palette-white-20: rgb(255 255 255 / 20%);
  --palette-white-50: rgb(255 255 255 / 50%);
  --palette-dusty-black: rgb(156 156 156);
  --palette-white-15: rgb(255 255 255 / 15%);
  --palette-black-30: rgb(0 0 0 / 30%);
  --palette-ash-black: rgb(73 73 73);
  --palette-white-30: rgb(255 255 255 / 30%);
  --palette-white-40: rgb(255 255 255 / 40%);
  --palette-white-0: rgb(255 255 255 / 0%);
  --palette-graphite-gray: rgb(156 156 156);
  --palette-white-5: rgb(255 255 255 / 5%);
  --palette-light-black: rgb(51 51 51 / 20%);
  --palette-yellow-500: rgb(250 217 26);
  --palette-yellow-400: rgb(251 225 72);

  /* Superficies */
  --color-bg: var(--palette-black);
  --color-surface-1: var(--palette-ink-black);
  --color-surface-2: var(--palette-dark-gray);
  --color-surface-3: var(--palette-jet-gray);
  --color-surface-4: var(--palette-smoky-black);
  --color-surface-5: var(--palette-charcoal-gray);

  /* Texto */
  --color-text: var(--palette-white);
  --color-text-soft: var(--palette-whisper-gray);
  --color-text-muted: var(--palette-slate-gray);
  --color-text-subtle: var(--palette-medium-gray);
  --color-text-inverse: var(--palette-black);

  /* Acento */
  --color-accent: var(--palette-yellow-500);
  --color-accent-hover: var(--palette-yellow-400);
  --color-accent-bright: #ffe500; /* frase del typewriter (componente de código de Framer) */

  /* Líneas y overlays */
  --color-line-faint: var(--palette-white-7);
  --color-line: var(--palette-white-10);
  --color-line-strong: var(--palette-white-20);
  --color-overlay: var(--palette-black-30);

  /* Tipografía */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", ui-serif, Georgia, serif;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-alt: "Urbanist", var(--font-sans);

  /* Layout */
  --container-max: 1440px;
  --gutter: 20px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* Movimiento (spring 0.4s de Framer aproximado con curva) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration: 0.4s;
  --duration-slow: 0.8s;
}

@media (min-width: 810px) {
  :root { --gutter: 40px; }
}
}