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

@layer tokens {
  :root {
    --c-white: hsl(0 0% 100%);
    --c-surface: hsl(60 14% 93%);
    --c-ink: hsl(0 0% 4%);
    --c-ink-soft: hsl(60 3% 35%);
    --c-border: hsl(60 6% 85%);

    --c-volt: hsl(72 90% 53%);
    --c-volt-2: hsl(101 78% 60%);
    --c-volt-grad: linear-gradient(135deg, var(--c-volt), var(--c-volt-2));
    --c-on-volt: var(--c-ink);

    --c-dark: hsl(0 0% 4%);
    --c-on-dark: hsl(0 0% 100%);
    --c-on-dark-soft: hsl(60 4% 68%);

    --font-display: "Cormorant Garamond", "Georgia", serif;
    --font-body: "Manrope", "Segoe UI", sans-serif;

    --fs-h1: clamp(2.75rem, 2rem + 4.2vw, 7.5rem);
    --fs-h2: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
    --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem);
    --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-mono: 0.8rem;

    --lh-tight: 1.03;
    --lh-snug: 1.18;
    --lh-body: 1.62;

    --container-max: 84rem;
    --container-pad: clamp(1.25rem, 4vw, 3rem);
    --header-h: 4.75rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 180ms;
    --dur-med: 420ms;

    --z-header: 1000;
    --z-menu: 1200;
    --z-cookie: 1100;
  }
}

@media (min-width: 1600px) {
  /* ampliación futura para escritorio grande: sin cambios por ahora */
}