/* ==========================================================================
   Tokens de diseño: único lugar donde se cambian colores, fuentes y medidas.
   Convención: variables CSS en kebab-case con prefijo (--color-, --radius-...).
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* Colores (modo claro). Contrastes verificados: texto ≥ 4.5:1, controles ≥ 3:1 */
  --color-bg: #eef1f6;
  --color-surface: #ffffff;
  --color-text: #1b2430;
  --color-brand: #000000;            /* nombre de la tienda: negro en claro, blanco en oscuro */
  --color-muted: #5d6878;
  --color-border: #d5dbe5;           /* separadores decorativos */
  --color-control-border: #76808f;   /* bordes de campos y casillas (WCAG 1.4.11) */
  --color-accent: #2f5bea;
  --color-on-accent: #ffffff;
  --color-gold: #f5c518;
  --color-success: #17803d;
  --color-warning: #c2410c;
  --color-danger: #c2255c;
  --color-whatsapp: #15803d;
  --color-on-whatsapp: #ffffff;
  --color-overlay: rgb(10 14 22 / 55%);
  --color-badge-bg: rgb(0 0 0 / 72%);
  --color-badge-text: #ffffff;
  --shadow-card: 0 1px 2px rgb(20 30 50 / 6%), 0 10px 28px rgb(20 30 50 / 9%);

  /* Tipografía */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Medidas */
  --radius-sm: 0.75rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --target-size: 2.75rem;   /* tamaño mínimo táctil: 44 px */
  --content-width: 73.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #12161d;
    --color-surface: #1b212b;
    --color-text: #eef1f6;
    --color-brand: #ffffff;
    --color-muted: #9aa5b5;
    --color-border: #2b3441;
    --color-control-border: #7b8798;
    --color-accent: #6c8cff;
    --color-on-accent: #0d1220;
    --color-success: #4cc27a;
    --color-warning: #ff9a5a;
    --color-danger: #ff6b9a;
    --shadow-card: 0 10px 30px rgb(0 0 0 / 45%);
  }
}