/* ============================================== */
/* Design tokens — Vital landing                  */
/* Heredados de gestion-pwa/src/style/theme/      */
/* Subset reducido: solo lo que usa la landing.   */
/* ============================================== */

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

    /* === Backgrounds (escala editorial 4 niveles) === */
    --bg-deep: 220 30% 6%;
    --bg: 220 28% 10%;
    --bg-raised: 220 24% 13%;
    --bg-elev: 220 22% 16%;

    /* === Ink (jerarquía de texto) === */
    --ink: 40 10% 96%;
    --ink-dim: 220 10% 68%;
    --ink-faint: 220 10% 45%;
    --ink-ghost: 220 12% 30%;

    /* === Brand === */
    --dorado: 44 88% 55%;
    --dorado-light: 44 88% 65%;
    --dorado-dark: 44 88% 45%;
    --bronce: 36 78% 48%;

    /* === Success === */
    --success: 150 35% 45%; /* el verde "puro" */
    --success-bg: 150 25% 16%; /* fondo sutil dark */
    --success-fg: 150 45% 78%; /* texto sobre ese fondo */

    /* === Lines === */
    --line: 220 14% 20%;
    --line-soft: 220 18% 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 === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --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;

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

    color-scheme: dark;
  }
}