/* ====================================================================
   Design tokens compilados desde design-tokens.json por tokens-to-css.mjs.
   NO EDITAR A MANO: regenera con `node scripts/tokens-to-css.mjs <slug>`.
   Unica fuente de hex/medidas; el resto del CSS usa var(--token).
   ==================================================================== */
:root {
  /* color · primitivos */
  --color-raw-carvao-900: #16252A;
  --color-raw-tinta-800: #23211E;
  --color-raw-salva-funda-700: #35624A;
  --color-raw-salva-500: #5C8A6E;
  --color-raw-cinza-morno-600: #6B6256;
  --color-raw-linha-forte-500: #897E6E;
  --color-raw-areia-300: #C9BBA6;
  --color-raw-linha-suave-200: #E3D9C8;
  --color-raw-creme-100: #F4ECDD;
  --color-raw-branco-0: #FFFFFF;
  --color-raw-manteiga-400: #F6D44C;
  --color-raw-whatsapp-500: #25D366;
  --color-raw-whatsapp-700: #128C7E;
  /* color · semanticos (los que consume la UI) */
  --color-bg: #F4ECDD;
  --color-surface: #FFFFFF;
  --color-fg: #23211E;
  --color-fg-muted: #6B6256;
  --color-accent: #35624A;
  --color-accent-deep: #5C8A6E;
  --color-cta: #F6D44C;
  --color-on-cta: #16252A;
  --color-bg-dark: #16252A;
  --color-surface-dark: #23211E;
  --color-fg-on-dark: #F4ECDD;
  --color-fg-on-dark-muted: #C9BBA6;
  --color-accent-on-dark: #F6D44C;
  --color-on-primary: #F4ECDD;
  --color-on-accent-deep: #F4ECDD;
  --color-border: #E3D9C8;
  --color-border-strong: #897E6E;
  --color-whatsapp: #25D366;
  --color-whatsapp-deep: #128C7E;
  --color-on-whatsapp: #16252A;
  --color-cta-hover: #E8C433;
  --color-error: #C0392B;
  --color-error-bg: #FDF3F2;
  /* typography · familias */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Menlo', monospace;
  /* typography · escala (clamp + weight + line-height + tracking) */
  --text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.82rem);
  --text-xs-weight: 500;
  --text-xs-lh: 1.5;
  --text-xs-tracking: 0.01em;
  --text-sm: clamp(0.9rem, 0.87rem + 0.15vw, 0.95rem);
  --text-sm-weight: 400;
  --text-sm-lh: 1.55;
  --text-sm-tracking: 0;
  --text-base: clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);
  --text-base-weight: 400;
  --text-base-lh: 1.65;
  --text-base-tracking: 0;
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);
  --text-lg-weight: 500;
  --text-lg-lh: 1.5;
  --text-lg-tracking: 0;
  --text-xl: clamp(1.4rem, 1.25rem + 0.75vw, 1.75rem);
  --text-xl-weight: 600;
  --text-xl-lh: 1.4;
  --text-xl-tracking: -0.01em;
  --text-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --text-2xl-weight: 700;
  --text-2xl-lh: 1.25;
  --text-2xl-tracking: -0.015em;
  --text-3xl: clamp(2.1rem, 1.6rem + 2.5vw, 3.25rem);
  --text-3xl-weight: 800;
  --text-3xl-lh: 1.15;
  --text-3xl-tracking: -0.02em;
  --text-display: clamp(2.6rem, 1.9rem + 3.4vw, 4.25rem);
  --text-display-weight: 800;
  --text-display-lh: 1.05;
  --text-display-tracking: -0.02em;
  --text-claim: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-claim-weight: 500;
  --text-claim-lh: 1.25;
  --text-claim-tracking: 0;
  /* spacing · rejilla 4pt */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  /* shadow */
  --shadow-sm: 0 1px 2px rgba(22, 37, 42, 0.06), 0 1px 3px rgba(22, 37, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(22, 37, 42, 0.10), 0 2px 4px rgba(22, 37, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(22, 37, 42, 0.14), 0 4px 8px rgba(22, 37, 42, 0.08);
  --shadow-cta: 0 6px 18px rgba(246, 212, 76, 0.40), 0 2px 6px rgba(22, 37, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(53, 98, 74, 0.55);
  /* motion · duraciones */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
  /* motion · easings */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* breakpoints (referencia; usar en @media con los mismos valores) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}