/*
 * iStore — tokens de diseño.
 * Concepto: "vitrina clara". Blanco y grises claros; el gris carbón del logo
 * (#333333) es el único color de marca. El cuadrado redondeado del logo se
 * repite como marco de todas las fotos (radio --r-frame).
 * Dos temas: día (claro, el de siempre) y noche (oscuro). El de noche se activa
 * con <html data-theme="dark"> desde el botón luna/sol del header
 * (web/scripts/components/theme.js) y se recuerda en el navegador.
 */
:root {
  color-scheme: light;

  /* Color */
  --paper: #ffffff;          /* fondo general */
  --mist: #f2f2f4;           /* marcos de foto, paneles */
  --mist-2: #e9e9ec;         /* hover de paneles */
  --line: #e2e2e6;           /* bordes y divisores */
  --ink: #333333;            /* gris carbón del logo: texto, botones */
  --ink-strong: #1f1f21;     /* títulos grandes */
  --ink-soft: #6b6b73;       /* texto secundario (contraste 5.1:1 sobre blanco) */
  --ink-faint: #9a9aa2;      /* precio tachado, decoración */
  --wa: #0e7a3e;             /* solo botones de WhatsApp (texto blanco 5.4:1) */
  --wa-hover: #0b6634;
  --ok: #1f8a4c;             /* stock disponible */
  --warn: #b26a00;           /* últimas unidades */
  --focus: #2457d6;
  --danger: #b3261e;         /* errores de formulario */

  /* Derivados que cambian con el tema */
  --on-ink: #ffffff;         /* texto sobre fondos --ink (botones, chips activos) */
  --wa-text: #0e7a3e;        /* texto y borde de los botones de WhatsApp con contorno */
  --wa-soft: #eef7f1;        /* hover de esos botones */
  --header-bg: rgba(255, 255, 255, 0.86);
  --bar-bg: rgba(255, 255, 255, 0.94);
  --glass: rgba(255, 255, 255, 0.92); /* etiquetas y flechas sobre fotos */
  --theme-color: #ffffff;

  /* Tipografía */
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 cuerpo */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.625rem;    /* 26 */
  --fs-2xl: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);   /* títulos de sección */
  --fs-hero: clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);    /* titular de portada */
  --fs-num: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);     /* cifras de la ficha */

  /* Espacio (escala de 8) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Forma */
  --r-frame: clamp(22px, 1rem + 1.2vw, 34px); /* marco de fotos, eco del logo */
  --r-panel: 24px;
  --r-control: 14px;
  --r-pill: 999px;

  /* Layout */
  --max: 1240px;
  --header-h: 72px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;
  --t-med: 280ms;

  --shadow-float: 0 10px 30px rgba(31, 31, 33, 0.14);
}

/* ---------- Modo noche ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f0f11;
  --mist: #1b1b1f;
  --mist-2: #25252a;
  --line: #2e2e34;
  --ink: #e6e6ea;
  --ink-strong: #ffffff;
  --ink-soft: #a9a9b1;       /* 8:1 sobre --paper, 7:1 sobre --mist */
  --ink-faint: #76767e;
  --ok: #4cc27a;
  --warn: #e3a64a;
  --focus: #7ea3ff;
  --danger: #ff8a80;
  --on-ink: #111113;
  --wa-text: #4fca83;
  --wa-soft: rgba(79, 202, 131, 0.12);
  --header-bg: rgba(15, 15, 17, 0.82);
  --bar-bg: rgba(15, 15, 17, 0.94);
  --glass: rgba(27, 27, 31, 0.9);
  --theme-color: #0f0f11;
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 699px) {
  :root { --header-h: 70px; }
}
@media (min-width: 900px) {
  :root { --header-h: 92px; }
}