/* =========================================================================
   TOKENS — variables CSS. Se carga PRIMERO.
   =========================================================================
   Aquí no se pinta nada: solo se ponen nombres a valores.
   Regla: ningún color literal (#xxxxxx) fuera de este fichero.

   Los colores se nombran por FUNCIÓN (--color-bg, --color-accent), no por
   aspecto (--burdeos). Motivo: en modo oscuro el burdeos deja de ser #6B1E2B,
   y una variable llamada --burdeos con otro valor sería una mentira.
   ========================================================================= */

/* ---------------------------------------------------------------------
   FUENTES — servidas desde el propio dominio, no desde Google Fonts.
   ---------------------------------------------------------------------
   Con Google Fonts el navegador tenía que conectar con DOS dominios más
   (googleapis y gstatic) antes de poder pintar texto: eso bloqueaba el
   renderizado ~0,8 s en móvil. Ahora los .woff2 salen del mismo servidor
   que la página y las dos principales se precargan desde el <head>.

   Son fuentes VARIABLES: un solo fichero contiene todos los pesos
   (400 a 700), por eso font-weight lleva un rango. Solo el subconjunto
   latino (U+0000-00FF...), que cubre castellano y catalán (è, ç, l·l).
   Licencia SIL Open Font License: se pueden alojar libremente.

   font-display: swap → mientras llega la fuente se ve el texto con la de
   respaldo (Georgia / system-ui), nunca una página en blanco. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

:root {
  /* Le dice al navegador que la web soporta ambos modos. Con esto los
     controles nativos (scrollbar, inputs, selects) se pintan acordes. */
  color-scheme: light dark;

  /* ---------------------------------------------------------------------
     PALETA — modo claro
     --------------------------------------------------------------------- */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f5f2;          /* banda cálida, para alternar secciones */
  --color-surface: #ffffff;          /* fondo de tarjetas */
  --color-text: #1a1a1a;
  --color-text-muted: #6b665f;       /* gris cálido oscurecido: ver nota abajo */
  --color-border: #e3ded7;

  --color-accent: #6b1e2b;           /* burdeos de marca — RELLENOS */
  --color-accent-ink: #6b1e2b;       /* burdeos — TEXTO sobre el fondo normal */
  --color-badge-text: var(--color-accent-ink); /* texto de .badge, sobre su fondo tintado */
  --color-error: #b3261e;            /* avisos de error */
  /* Fondo de las fotos de producto de las tiendas (botellas sobre blanco).
     NO se redefine en modo oscuro a propósito: la foto trae fondo blanco. */
  --color-product-bg: #ffffff;
  --color-product-muted: #8a8580;    /* texto sobre ese fondo blanco */
  --color-accent-hover: #551722;
  --color-link-hover: #551722;       /* texto de enlace al pasar el ratón */
  --color-accent-text: #ffffff;      /* texto que va ENCIMA del acento */

  /* Banda oscura dentro del modo claro (el bloque negro de las maquetas) */
  --color-band-bg: #1a1a1a;
  --color-footer-bg: #1a1a1a;          /* pie: en claro, la misma banda oscura */
  --color-band-text: #f5f1ec;

  /* NOTA SOBRE EL GRIS: el gris cálido de marca (#8A8580) sobre blanco da
     3,0:1 de contraste y NO llega al mínimo AA de 4,5:1 para texto normal.
     Se usa oscurecido (#6B665F, 5,7:1) para texto, y el original queda
     reservado para bordes y elementos decorativos, donde no aplica el mínimo.

     Todas las combinaciones de esta paleta están comprobadas contra AA:
       texto normal sobre fondo ......... 5,7:1 mínimo
       texto sobre acento ............... 11,4:1 (claro) / 4,9:1 (oscuro)
       acento como texto sobre fondo .... 11,4:1 (claro) / 5,7:1 (oscuro) */

  /* ---------------------------------------------------------------------
     TIPOGRAFÍA
     --------------------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida con clamp(mínimo, preferido, máximo).
     El valor del medio lleva vw, así el tamaño crece con el ancho de
     pantalla de forma continua, sin saltos por breakpoint.
     El 1rem que se suma al vw es un truco de accesibilidad: garantiza que
     el texto siga respondiendo al zoom del navegador. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
  --text-3xl: clamp(1.9rem, 1.45rem + 2.2vw, 3rem);
  --text-4xl: clamp(2.3rem, 1.6rem + 3.4vw, 4rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --tracking-wide: 0.12em;           /* para el kicker en mayúsculas */

  /* ---------------------------------------------------------------------
     ESPACIADO — progresión, no números sueltos
     ---------------------------------------------------------------------
     Usar siempre uno de estos. Si cada margen del sitio es un número
     distinto e inventado, el diseño se ve descuidado aunque no se sepa
     señalar por qué. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Padding vertical de las secciones, también fluido. 2026-10-01: antes
     clamp(3rem, 2rem + 5vw, 6rem); había que hacer demasiado scroll. */
  --section-gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);

  /* ---------------------------------------------------------------------
     MEDIDAS Y FORMAS
     --------------------------------------------------------------------- */
  --max-width: 72rem;                /* ancho máximo del contenido */
  --max-width-prose: 65ch;           /* ancho cómodo de lectura */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 6%);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 8%), 0 16px 40px rgb(0 0 0 / 10%);

  --transition: 160ms ease;

  /* Altura mínima de cualquier elemento pulsable en móvil.
     44px es el mínimo recomendado para objetivos táctiles. */
  --tap-target: 44px;
}

/* =========================================================================
   MODO OSCURO
   =========================================================================
   Automático, sin botón (decisión de marca). Solo se REDEFINEN las
   variables: ni una regla de maquetación se repite aquí.

   Negros cálidos en vez de negro puro, y el burdeos aclarado porque el
   #6B1E2B original sobre fondo oscuro no llega al contraste mínimo.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #100e0b;
    --color-bg-alt: #221e1a;
    --color-surface: #221e1a;
    --color-text: #f5f1ec;
    --color-text-muted: #a9a29a;
    --color-border: #3a342e;

    /* 2026-09-29: antes #c2455c / #d9667c, que se veían rosas. Los
       rellenos grandes (botones, cabeceras, etiquetas) pasan a color vino
       de verdad; el texto no puede oscurecerse más sin perder contraste
       sobre el fondo oscuro, así que solo se desplaza hacia el rojo. */
    --color-accent: #9b2335;         /* relleno: texto blanco encima da 7,8:1 */
    --color-accent-ink: #d36770;     /* texto: 5,4:1 sobre el fondo y 4,7:1 sobre las tarjetas */
    /* En la etiqueta el fondo va tintado de burdeos: un tono más claro
       para el texto da 8:1. */
    --color-badge-text: #e8aaae;
    --color-error: #f2b8b5;          /* rojo claro: sobre fondo oscuro da >7:1 */
    --color-accent-hover: #b03a4e;   /* relleno al pasar el ratón: blanco encima da 5,9:1 */
    --color-link-hover: #e8aaae;     /* enlace al pasar el ratón: más claro que el normal, 8:1 */
    --color-accent-text: #ffffff;

    /* En oscuro, la "banda oscura" se invierte: si no, no se distinguiría
       del fondo. Pasa a ser la banda clara del par. */
    --color-band-bg: #221e1a;
    --color-band-text: #f5f1ec;
    /* El pie, más oscuro que cualquier sección, para que no se funda con
       la última (las secciones alternan #100e0b y #221e1a). */
    --color-footer-bg: #080706;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 45%), 0 16px 40px rgb(0 0 0 / 35%);
  }
}