/* ============================================== */
/* Design tokens — Vital landing                  */
/* Dirección industrial: negro cálido + amarillo   */
/* de marca (#FEDD00), tipografía condensada.      */
/* ============================================== */

@layer theme {
  :root {
    /* === Fonts === */
    --font-body:
      "Archivo", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", sans-serif;
    --font-display:
      "Big Shoulders Display", "Archivo Black", "Archivo", ui-sans-serif,
      sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* === Backgrounds (negro cálido, escala editorial 4 niveles) === */
    --bg-deep: 20 15% 5%;
    --bg: 20 10% 8%;
    --bg-raised: 20 8% 11%;
    --bg-elev: 20 8% 14%;

    /* === Ink (jerarquía de texto, cálida) === */
    --ink: 40 12% 96%;
    --ink-dim: 30 6% 68%;
    --ink-faint: 30 6% 56%;
    --ink-ghost: 30 8% 30%;

    /* === Brand — amarillo real del logo (#FEDD00) === */
    --dorado: 52 100% 50%;
    --dorado-light: 52 100% 62%;
    --dorado-dark: 46 100% 42%;

    /* === Lines === */
    --line: 30 10% 20%;
    --line-soft: 30 12% 18%;

    /* === Typography scale (fluido 360→1440px) === */
    --fs-display: clamp(2.5rem, 6vw + 1.5rem, 6rem); /* 40 → 96px (hero) */
    --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem); /* 32 → 56px (section heads) */
    --fs-h2: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem); /* 24 → 36px */
    --fs-h3: 1.5rem; /* 24px */
    --fs-body-lg: 1.125rem; /* 18px */
    --fs-body: 1rem; /* 16px */
    --fs-sm: 0.875rem; /* 14px */
    --fs-xs: 0.75rem; /* 12px */

    --lh-display: 0.95;
    --lh-heading: 1.1;
    --lh-body: 1.55;

    --tracking-display: -0.03em;
    --tracking-heading: -0.015em;
    --tracking-overline: 0.14em;

    /* === Spacing (escala 4pt) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;
    --space-48: 192px;

    /* === Radius (esquinas rectas, no card redondeada genérica) === */
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-full: 9999px;

    /* === Shadows (3 niveles, dark-friendly) === */
    --shadow-sm: 0 2px 4px -1px hsl(220 20% 3% / 0.4);
    --shadow-md: 0 8px 16px -4px hsl(220 20% 3% / 0.5);
    --shadow-lg: 0 24px 40px -12px hsl(220 20% 3% / 0.7);

    /* === Container widths === */
    --container-sm: 640px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-reading: 720px;

    /* === Motion === */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;
    --dur-hero: 700ms;

    /* === Z-index === */
    /* Header > drawer: el burger sigue accesible para cerrar el drawer. */
    --z-drawer: 100;
    --z-header: 200;
    --z-modal: 300;

    color-scheme: dark;
  }
}