/* ════════════════════════════════════════════════════════════════════════
   CHELSEA CANDLE ATELIER — tokens.css
   ────────────────────────────────────────────────────────────────────────
   ÚNICO lugar donde vive la IDENTIDAD VISUAL de la marca: colores, tipografía,
   escala, espaciados, radios, sombras, transiciones y medidas de layout.

   REGLA: el resto del CSS solo CONSUME estas variables con var(--...).
   Nunca escribir un color "a mano" en los demás archivos. Para cambiar la
   marca entera, se edita aquí y nada más.

   REGLA DE MARCA (obligatoria): SOLO colores SÓLIDOS. Prohibidos los degradados
   (linear-gradient / radial-gradient / conic-gradient) en toda la página.
   Si se necesita variar un color, usar otra variable sólida, nunca un gradient.

   Este archivo debe cargarse ANTES que base.css en cada HTML.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color base (paleta del logo de Chelsea) ──
     Los NOMBRES de variable se conservan (--c-terra* = rosa, --c-sage* = verde,
     --c-gold* = dorado) para no romper el resto del CSS; cambian sus VALORES.
     Se añaden coral y turquesa para el look multicolor festivo del logo. */
  --c-white:      #FFFFFF;
  --c-cream:      #FFFFFF;   /* fondo principal: BLANCO (igual que el logo) */
  --c-ice:        #FCF4EF;   /* secciones claras alternas: rosa/crema muy sutil */
  --c-sand:       #F3F7EF;   /* verde muy claro alterno */
  --c-border:     #EFE3D8;   /* borde crema suave */
  --c-text:       #4A3340;   /* texto: ciruela suave oscuro */
  --c-text-soft:  #8A7280;   /* texto secundario */
  --c-heading:    #4A3340;   /* títulos/heros: vino/ciruela (igual que el texto) */
  --c-graphite:   #FCF4EF;   /* (ya NO oscuro) reusa el crema claro para no romper refs */

  /* ── Acentos (del logo) ── */
  --c-terra:        #C84A87;  /* ROSA/magenta del "Chelsea" (acento principal) */
  --c-terra-soft:   #E483B0;  /* rosa suave */
  --c-terra-dark:   #A83A6E;  /* hover/active: magenta más oscuro */
  --c-sage:         #7FA968;  /* VERDE salvia del "Candle Atelier" (secundario) */
  --c-sage-dark:    #5F8A4C;  /* verde más oscuro */
  --c-olive-pastel: #FBD9BE;  /* durazno suave (óvalo de hover del menú) */
  --c-gold:         #D9A85C;  /* DORADO/miel del perro (detalle) */
  --c-gold-soft:    #ECCB8E;
  --c-coral:        #F08A6E;  /* CORAL de las hojas */
  --c-coral-soft:   #F7B3A0;
  --c-turq:         #6FC9B5;  /* TURQUESA/menta de las hojas */
  --c-turq-soft:    #A6E0D3;
  --c-flame:        #F5A623;  /* NARANJA de la llama */
  --c-yellow:       #F2D27A;  /* AMARILLO suave de la vela */
  /* Durazno tostado: más oscuro que el header/footer (#FCF4EF). Para botones
     "Agregar" y etiquetas de las tarjetas (en vez del rosa). Texto blanco encima. */
  --c-peach:        #C67C56;  /* durazno terracota (estado normal) */
  --c-peach-dark:   #B96C48;  /* durazno más oscuro (hover) */

  /* ── Color de marca de WhatsApp (verde oficial) ── */
  --c-wa:        #25D366;
  --c-wa-dark:   #1FB957;

  /* ── Tipografia ──
     Manrope para titulos y subtitulos.
     Montserrat para TODO lo demas: texto, navegacion y botones.
     Inter quedo FUERA del sitio por completo (ni siquiera como respaldo). */
  --font-display:  "Manrope", system-ui, -apple-system, sans-serif;
  --font-subtitle: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body:     "Montserrat", system-ui, -apple-system, sans-serif;
  --font-nav:      "Montserrat", system-ui, -apple-system, sans-serif;
  --font-button:   "Montserrat", system-ui, -apple-system, sans-serif;

  /* ── Escala tipográfica ── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.5rem;
  --fs-5xl:  4.5rem;

  /* ── Espaciado ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;
  --sp-16: 10rem;

  /* ── Radios ──
     TODO con esquina REDONDEADA: contenedores, inputs, badges y botones (.btn).
     La escala crece con el tamaño del elemento; los botones usan una píldora suave.
     Los elementos circulares (flotantes, carrito, burbuja) usan --r-round (50%). */
  --r-sm:   8px;     /* elementos pequeños: badges, chips, inputs compactos */
  --r-md:   14px;    /* contenedores medianos: tarjetas, campos, cajas */
  --r-lg:   20px;    /* contenedores grandes: paneles, secciones destacadas */
  --r-xl:   28px;    /* contenedores extra grandes: hero, bloques amplios */
  --r-pill: 999px;   /* etiquetas tipo píldora */
  --r-btn:  999px;   /* botones de acción: píldora redondeada */
  --r-round: 50%;    /* elementos circulares (flotantes, carrito, burbuja) */
  --r-toggle: 999px; /* toggle de idioma: píldora (rectangular redondeado) */

  /* ── Sombras (tintadas cálido/rosa suave) ── */
  --sh-xs: 0 1px 2px rgba(74, 51, 64, 0.05);
  --sh-sm: 0 2px 10px rgba(200, 74, 135, 0.10);
  --sh-md: 0 10px 28px rgba(200, 74, 135, 0.14);
  --sh-lg: 0 24px 60px rgba(74, 51, 64, 0.18);

  /* ── Transiciones ── */
  --t-fast: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-base: 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-slow: 460ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Layout ── */
  --container:        1240px;
  --container-narrow: 980px;
  --header-h:         84px;
  --topbar-h:         32px;
}