/* ==========================================================================
   COCO'S — Design Tokens
   Heladería + Kitchen. Paleta juguetona, tarjetas redondeadas, tipografía
   "bubble". Cada categoría tiene su propio color de acento pero comparte
   el mismo sistema base (fondo crema, tinta oscura, radios grandes).
   ========================================================================== */

:root {

    /* -- Base --------------------------------------------------------------
     Fondo crema cálido compartido por todas las páginas + tinta oscura
     para texto principal. */
    --color-bg: #fff7ee;
    /* fondo general (crema durazno) */
    --color-surface: #FFFFFF;
    /* tarjetas blancas puntuales */
    --color-ink: #1B140F;
    /* texto principal (casi negro cálido) */
    --color-ink-soft: #8A7C72;
    /* texto secundario / descripciones */
    --color-border: rgba(27, 20, 15, 0.08);

    /* -- Marca / neutros -----------------------------------------------------
     Usado en el pill "COCO'S" y elementos de marca. */
    --color-badge-yellow: #F7CB3E;
    /* FAVORITA / TOP DEL DÍA / MINI TOP */
    --color-badge-yellow-ink: #1B140F;

    /* -- Categoría: BEBIDAS (verde lima ácido) -------------------------- */
    --color-bebidas: #D7F23C;
    --color-bebidas-ink: #1B140F;
    --color-bebidas-soft: #FBE3EC;
    /* fondo de tarjeta "favorita" */

    /* -- Categoría: HELADOS (rosa magenta) -------------------------------- */
    --color-helados: #F0538F;
    --color-helados-ink: #FFFFFF;
    --color-helados-title: #F3805A;
    /* naranja usado en el título "HELADOS" */
    --color-helados-soft: #F9C948;
    /* fondo hero amarillo mostaza */

    /* -- Categoría: SALADO (coral / naranja) ------------------------------ */
    --color-salado: #F3805A;
    --color-salado-ink: #1B140F;
    --color-salado-soft: #FBE3EC;

    /* -- Categoría: INFANTIL (verde menta) -------------------------------- */
    --color-infantil: #A6E8BE;
    --color-infantil-ink: #1B140F;
    --color-infantil-soft: #FBDCE8;

    /* -- Extras de layout (home) ------------------------------------------ */
    --color-accent-orange: #F3805A;
    --color-accent-mint: #B9EFC9;

    /* -- Tipografía ----------------------------------------------------------
     Display: rounded, gruesa, con personalidad "bubble" para títulos.
     Body: sans redondeada más neutra para descripciones y precios. */
    --font-display: 'Shantell Sans', 'Fredoka', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --fs-display-xl: clamp(2.75rem, 6vw, 4rem);
    --fs-display-lg: clamp(2rem, 4vw, 2.75rem);
    --fs-display-md: 1.5rem;
    --fs-body-lg: 1.15rem;
    --fs-body-md: 1rem;
    --fs-body-sm: 0.85rem;
    --fs-price: 1.35rem;

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* -- Espaciado (escala 4px) -------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;

    /* -- Radios --------------------------------------------------------------
     Todo es muy redondeado: pills completos para precios/badges,
     radios grandes (32-40px) para tarjetas. */
    --radius-pill: 999px;
    --radius-card-xs: 10px;
    --radius-card-sm: 20px;
    --radius-card-md: 32px;
    --radius-card-lg: 40px;

    /* -- Sombra sutil (uso mínimo, el diseño es plano por naturaleza) ------- */
    --shadow-card: 0 2px 0 rgba(27, 20, 15, 0.04);

    /* -- Contenedor ----------------------------------------------------------
     Mockups son formato móvil (menú tipo story/carta digital). */
    --container-max: 480px;
}