/* ════════════════════════════════════════════════════════════════════════
   TEMA DEL CLIENTE — Melífica
   ════════════════════════════════════════════════════════════════════════
   Colores y tipografías de ESTA tienda. tienda.css (el motor) solo usa estas
   variables, nunca colores sueltos: para vestir otra tienda basta con
   cambiar este archivo (y los archivos de marca). Ver docs/CLONAR.md.

   La paleta sale de la etiqueta del bote: el ámbar del goteo (#E08D39), la
   miel (#E9A83F), la miel clara (#EFBB64) y el negro de la rotulación. Se ha
   calentado el negro hacia el marrón (tinta de propóleo) y se ha añadido un
   crema de cera como fondo, para que todo respire a miel sin ser amarillo.

   Contraste comprobado (WCAG AA): tinta sobre crema 16,2:1 · tinta-suave
   sobre crema 6,3:1 · ámbar-texto sobre crema 5,1:1 · tinta sobre miel 8,1:1
   (blanco sobre ámbar daría 2,9:1: por eso los botones de miel llevan texto
   oscuro, no blanco).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tipografías (servidas desde el propio dominio) ─────────────────────── */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ── Paleta ─────────────────────────────────────────────────────────
     Nombres SEMÁNTICOS (los que usa el motor) → color de marca de Melífica.
     Para otra tienda se cambian solo los valores, nunca los nombres. */
  --c-fondo:            #FFF8EC;   /* crema — fondo general */
  --c-alterno:          #FBEBCB;   /* cera — secciones alternas */
  --c-superficie:       #FFFFFF;   /* tarjetas */
  --c-principal:        #EBA43A;   /* miel — botones, bandas, goteo */
  --c-principal-claro:  #F6C766;   /* miel clara */
  --c-principal-oscuro: #D9822B;   /* ámbar — hover, degradados */
  --c-acento-texto:     #A2560F;   /* ámbar tostado — enlaces y antetítulos (AA) */
  --c-tinta:            #241A10;   /* el negro de la etiqueta, calentado — texto */
  --c-tinta-suave:      #6B5A47;   /* texto secundario */
  --c-oscuro:           #2E1F12;   /* propóleo — bloques oscuros y pie */
  --c-sobre-oscuro:     #FBEBCB;   /* texto sobre fondo oscuro */
  --c-borde:            #EADBC0;
  --c-exito:            #56663A;   /* romero — confirmaciones y marcas «natural» */
  --c-error:            #B3261E;
  --c-sobre-foto:       #FFF8EC;   /* titulares sobre fotos oscurecidas */
  --c-sobre-foto-suave: #F6E7CF;   /* textos sobre fotos oscurecidas */
  --c-sobre-principal:  #3E2C18;   /* texto secundario sobre el color principal */
  --c-resalte:          #FFF6E3;   /* fondo de celdas y opciones destacadas */

  /* Fondo de la foto de cada producto. Las claves (azahar, romero…) son las
     que se eligen en Panel → Producto → «Color de fondo»; ver 'acentos' en
     cliente/tienda.php. */
  --acento-azahar:    #FBEFD6;
  --acento-romero:    #E6EBDD;
  --acento-milflores: #F7DDB5;
  --acento-polen:     #FAE7A6;
  --acento-propoleo:  #EBD6BF;
  --acento-jalea:     #F4EEE2;
  --acento-pack:      #F5DCC0;
  --acento-tomillo:   #EDE4EE;
  --acento-brezo:     #F1DDE3;
  --acento-encina:    #E6DDD2;
  --acento-algarrobo: #EBDACB;
  --acento-eucalipto: #DFEAE4;
  --acento-panal:     #F8E3B0;
  --acento-cera:      #FAF0CF;

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --f-titulo: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Formas ─────────────────────────────────────────────────────────── */
  --radio:   20px;
  --radio-s: 12px;
  --sombra:   0 1px 2px rgba(36, 26, 16, .05), 0 10px 30px rgba(36, 26, 16, .08);
  --sombra-f: 0 2px 4px rgba(36, 26, 16, .06), 0 22px 50px rgba(36, 26, 16, .16);
}