/* ============================================================
   DeBocaEnBoca · Sistema de diseño (tokens)
   Refrescamiento visual — base limpia y minimalista
   ============================================================ */

:root {
    /* ---- Marca ---- */
    --brand-coral: #ef4836;   /* acento / CTA */
    --brand-coral-dark: #d83a29;
    --brand-wine: #38132c;    /* fondo oscuro / superficies */
    --brand-cream: #ffe8b1;   /* detalle cálido */
    --heading: #694735;       /* titulares sobre fondo claro */
    --brand-brown: #5c3d22;   /* detalle cálido */

    /* ---- Neutros ---- */
    --ink: #1b1614;           /* texto principal */
    --ink-soft: #6b625f;      /* texto secundario */
    --line: #ece7e3;          /* bordes / separadores */
    --surface: #ffffff;       /* fondo base */
    --surface-alt: #faf7f4;   /* fondo de sección suave */
    --surface-dark: #38132c;  /* secciones oscuras */

    /* ---- Tipografía ---- */
    --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --fs-kicker: 0.78rem;
    --fs-body: 1.0625rem;
    --fs-lead: 1.25rem;
    --fs-h3: 1.4rem;
    --fs-h2: clamp(1.9rem, 1.2rem + 2.2vw, 2.85rem);
    --fs-h1: clamp(2.6rem, 1.4rem + 4.4vw, 5rem);

    /* ---- Espaciado ---- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6.5rem;

    --container: 1180px;
    --container-narrow: 820px;

    /* ---- Forma ---- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 26px;
    --radius-pill: 999px;

    --shadow-sm: 0 6px 20px rgba(56, 19, 44, 0.06);
    --shadow-md: 0 18px 48px rgba(56, 19, 44, 0.10);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}