/* Design tokens — única fuente de verdad de colores, tipografía y espaciado. */
:root {
  /* Colores (extraídos del logo) */
  --color-primary: #6b2a10;
  --color-primary-hover: #4f1e0b;
  --color-primary-active: #3a1608;
  --color-secondary: #ef9234;
  --color-secondary-hover: #e07f1f;
  --color-secondary-active: #c86a12;
  --color-accent: #f6b93b;
  --color-text: #000000;
  --color-text-on-dark: #ffffff;
  --color-text-on-secondary: #ffffff;
  --color-text-muted: #555555;
  --color-gray: #c9c9c9;
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1ebe5a;
  --color-whatsapp-active: #17a64e;
  --color-whatsapp-dark: #128c7e;
  --button-height: 4.5rem;
  --color-bg: #ffffff;
  --color-bg-cream: #fdf6e3; /* solo cuando se pida expresamente */
  --color-bg-white: #ffffff;
  --color-surface: #f8ebd0;
  --color-surface-soft: #fffbf2;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-success: #2e9e5b;
  --color-danger: #d64545;
  --color-border: rgba(107, 42, 16, 0.2);
  --color-border-soft: rgba(107, 42, 16, 0.15);
  --shadow-soft: 0 0.2rem 1.2rem rgba(107, 42, 16, 0.08);

  /* Tipografía */
  --font-headings: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;
  --font-tagline: "Handelson Three", "Brush Script MT", cursive;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-body: 1.6rem;

  /* Layout */
  --section-padding-y: 4.8rem;
  --section-padding-y-bg: 8rem; /* secciones con fondo de color */
  --container-padding-x: 3.2rem;
  --container-max-width: 144rem;

  /* Forma y movimiento */
  --radius-sm: 0.4rem;
  --radius-md: 1rem;
  --radius-button: 0.8rem;
  --radius-lg: 1rem;
  --radius-pill: 999rem;
  --transition-base: 200ms ease-in-out;
  --focus-outline: 0.2rem solid var(--color-primary);
  --focus-offset: 0.2rem;
}