/**
 * Lore & Science — Design Tokens
 * Fuente: Lovable project (index.css + tailwind.config.ts)
 * Valores exactos convertidos de HSL a HEX.
 * NO modificar sin actualizar también el Kit Global de Elementor.
 */

:root {
  /* -- MARCA ----------------------------------- */
  --bcc-brand-teal:       #0C4859;  /* hsl(193,75%,20%) — headings, nav activo */
  --bcc-brand-teal-light: #8DC8C7;  /* hsl(179,35%,67%) — acentos, eyebrows */
  --bcc-brand-rose:       #E61E50;  /* hsl(345,80%,51%) */

  /* -- CTAs ------------------------------------- */
  --bcc-cta:              #188A81;  /* hsl(175,70%,32%) — botón compra */
  --bcc-cta-hover:        #10746B;  /* hsl(175,75%,26%) */
  --bcc-conseil:          #DA053A;  /* hsl(345,95%,44%) — botón conseil */
  --bcc-conseil-hover:    #BC0432;  /* hsl(345,95%,38%) */

  /* -- NATURALES -------------------------------- */
  --bcc-cream:            #F5F1EA;  /* hsl(40,35%,94%) */
  --bcc-sage:             #B2CBBD;  /* hsl(145,20%,75%) */
  --bcc-gold:             #D19E47;  /* hsl(38,60%,55%) */
  --bcc-terracotta:       #B86246;  /* hsl(15,45%,50%) */

  /* -- SISTEMA ---------------------------------- */
  --bcc-background:       #F9F8F5;  /* hsl(40,30%,97%) */
  --bcc-foreground:       #1E2D26;  /* hsl(150,20%,15%) */
  --bcc-muted:            #EDEBE7;  /* hsl(40,15%,92%) */
  --bcc-muted-foreground: #677E72;  /* hsl(150,10%,45%) */
  --bcc-border:           #E6E2DA;  /* hsl(40,20%,88%) */
  --bcc-secondary:        #E9E1D7;  /* hsl(35,30%,88%) */
  --bcc-card:             #F3F1EC;  /* hsl(40,25%,95%) */

  /* -- TIPOGRAFÍAS ------------------------------ */
  --bcc-font-serif: "Playfair Display", serif;
  --bcc-font-sans:  "DM Sans", sans-serif;

  /* -- ESCALA DE TEXTO -------------------------- */
  --bcc-text-xs:   0.75rem;
  --bcc-text-sm:   0.875rem;
  --bcc-text-base: 1rem;
  --bcc-text-lg:   1.125rem;
  --bcc-text-xl:   1.25rem;
  --bcc-text-2xl:  1.5rem;
  --bcc-text-3xl:  1.875rem;
  --bcc-text-4xl:  2.25rem;
  --bcc-text-5xl:  3rem;

  /* -- RADIOS ----------------------------------- */
  --bcc-radius-sm:   0.25rem;
  --bcc-radius:      0.5rem;    /* = --radius en Lovable */
  --bcc-radius-md:   0.75rem;
  --bcc-radius-lg:   1rem;
  --bcc-radius-xl:   1.5rem;
  --bcc-radius-pill: 9999px;

  /* -- LAYOUT ----------------------------------- */
  --bcc-container-max: 1400px;  /* = 2xl en Tailwind config */

  /* -- SPACING ---------------------------------- */
  --bcc-space-1:  0.25rem;
  --bcc-space-2:  0.5rem;
  --bcc-space-3:  0.75rem;
  --bcc-space-4:  1rem;
  --bcc-space-6:  1.5rem;
  --bcc-space-8:  2rem;
  --bcc-space-10: 2.5rem;
  --bcc-space-12: 3rem;
  --bcc-space-16: 4rem;
  --bcc-space-24: 6rem;
}