/* TraiBuy — sistema de tokens de diseño (Gate A, master build). Fuente
   única de verdad para espaciado, tipografía, color, radios, sombras y
   movimiento — todo lo demás referencia esto, cero números mágicos.

   Los colores NO se inventan aquí: son los mismos de
   appsscript/brand.html (regla del proyecto — un solo archivo de marca).
   Si un color de marca cambia, se edita brand.html Y este archivo, nunca
   uno sin el otro.

   TEMA OSCURO PREMIUM (decisión de Sam, 2026-09-20: "dark and premium").
   La tienda es oscura de punta a punta; las apps de Apps Script (empaque,
   compras) siguen claras y no se tocan. Como el verde de marca (#006D11)
   no da contraste sobre negro, sobre oscuro se usa su variante clara
   --tb-green-bright (definida también en brand.html).

   Contraste verificado (WCAG 2.2 AA, cálculo en el commit) — todo >=4.5:1:
     sobre fondo #0A0A0C: texto F4F4F6 18.0 · cuerpo A3A3AD 7.9 ·
       apagado 8B8B96 5.9 · acento 3FD35A 10.1 · peligro FF6B6B 7.1 ·
       ámbar E0A24D 8.9
     sobre tarjeta #131316: texto 16.9 · cuerpo 7.4 · apagado 5.5 · acento 9.4
     texto del botón (04170A) sobre el acento: 9.4 · insignia blanca sobre
       rojo de marca: 4.8 */

:root {
  /* ---- Color de marca (idéntico a brand.html) ---- */
  --tb-red: #E60100;
  --tb-green: #006D11;
  --tb-charcoal: #474747;
  --tb-bg: #F5F5F5;
  --tb-amber: #BA7517;
  --tb-danger: #A32D2D;
  --tb-red-tint: rgba(230, 1, 0, 0.12);
  --tb-green-tint: rgba(0, 109, 17, 0.12);
  --tb-amber-tint: rgba(186, 117, 23, 0.12);
  --tb-danger-tint: rgba(163, 45, 45, 0.12);
  --tb-ink: #1B1B1B;
  --tb-border: #E4E2DD;
  --tb-white: #FFFFFF;
  --tb-green-bright: #3FD35A;
  --tb-danger-bright: #FF6B6B;
  --tb-amber-bright: #E0A24D;

  /* ---- Color semántico (lo que los componentes usan) — TEMA OSCURO ---- */
  --surface: #0A0A0C;            /* lienzo de la página */
  --surface-raised: #131316;     /* tarjetas, hojas, drawers */
  --surface-warm: #17171C;       /* campos, chips, bloques secundarios */
  --photo-bg: #F1F1EC;           /* fondo claro detrás de las fotos de producto */
  --on-surface: #A3A3AD;         /* texto de cuerpo */
  --on-surface-strong: #F4F4F6;  /* titulares, precios, texto principal */
  --accent: var(--tb-green-bright);
  --accent-hover: #63E17B;
  --on-accent: #04170A;          /* texto sobre el acento (9.4:1) */
  --accent-tint: rgba(63, 211, 90, 0.12);
  --accent-warm: var(--tb-amber-bright);
  --accent-warm-tint: rgba(224, 162, 77, 0.14);
  --danger: var(--tb-danger-bright);
  --danger-tint: rgba(255, 107, 107, 0.14);
  --line: #26262C;
  --line-strong: #34343C;
  --muted: #8B8B96;
  --glow: rgba(63, 211, 90, 0.16);   /* resplandor detrás del hero, como ALETHY */
  --glass: rgba(10, 10, 12, 0.86);         /* encabezado / barra de categorías translúcidos */
  --glass-strong: rgba(10, 10, 12, 0.92);  /* barra inferior */
  --glass-soft: rgba(10, 10, 12, 0.72);    /* botón de favorito sobre la foto */
  --glass-raised: rgba(19, 19, 22, 0.88);  /* botón de cerrar de las hojas */

  /* ---- Espaciado — grid de 8pt, unidad base 4px ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Tipografía — escala modular ~1.25, base 16px.
     tb-xl (25px) y tb-display (52px) coinciden a propósito con
     .tb-product-name/.tb-qty de brand.html — misma escala, no una
     paralela. Fuente: mismo stack de sistema que brand.html ya usa
     (rápido, sin descarga) + una serif editorial opcional para
     titulares (--font-display), con font-display:swap. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --track-tight: -0.035em;   /* titulares grandes: apretados, como ALETHY */
  --track-caps: 0.14em;      /* etiquetas en mayúsculas */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-display: 52px;

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---- Elevación ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.65);

  /* ---- Movimiento — nada anima con linear/ease por defecto ---- */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 360ms;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tema oscuro ÚNICO (no depende de prefers-color-scheme): toda la tienda se
   estila con estos tokens, así que ya no queda a medias como la variante
   anterior. `color-scheme: dark` hace que los controles nativos (select,
   scrollbars, teclado) también salgan oscuros. */
:root { color-scheme: dark; }

/* prefers-reduced-motion: los tokens de duración colapsan a ~instantáneo
   en vez de que cada componente tenga que chequear la media query por su
   cuenta — basta con que use var(--dur...). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}

/* Tema CLARO (cálido, editorial): la paleta de la TOS — verde de marca, blanco, ámbar, carbón. El visitante lo elige con
   el icono sol/luna del encabezado; por defecto la tienda abre en oscuro. Se activa con <html data-theme="light">.
   Contraste verificado (>= 4.5:1): cuerpo 55524B sobre FBF8F2 = 7.1, apagado 6E6A61 = 5.0, verde 006D11 = 6.3. */
html[data-theme="light"] {
  color-scheme: light;
  --surface: #FBF8F2; --surface-raised: #FFFFFF; --surface-warm: #F3EEE4; --photo-bg: #FFFFFF;
  --on-surface: #55524B; --on-surface-strong: #1B1B1B; --muted: #6E6A61;
  --accent: #006D11; --accent-hover: #005A0E; --on-accent: #FFFFFF; --accent-tint: rgba(0, 109, 17, 0.09);
  --accent-warm: #9A5F0E; --accent-warm-tint: rgba(186, 117, 23, 0.12);
  --danger: #A32D2D; --danger-tint: rgba(163, 45, 45, 0.10);
  --line: #E8E1D3; --line-strong: #D6CDBB; --glow: rgba(0, 109, 17, 0.07);
  --glass: rgba(251, 248, 242, 0.88); --glass-strong: rgba(251, 248, 242, 0.95);
  --glass-soft: rgba(255, 255, 255, 0.82); --glass-raised: rgba(255, 255, 255, 0.92);
  --shadow-sm: 0 2px 8px rgba(60, 45, 20, 0.08); --shadow-md: 0 10px 30px rgba(60, 45, 20, 0.12); --shadow-lg: 0 24px 70px rgba(60, 45, 20, 0.2);
}