/* ══════════════════════════════════════════════════════════════
   Zymbiotek — Design Tokens · Sistema visual claro (DESIGN.md jul-2026)
   Fuente de verdad de color, tipografía, espaciado, radios y sombras.

   DOS MODOS, nada más:
   · claro  = default y referencia principal  (:root)
   · oscuro = [data-theme="dark"] — mismos tokens, valores derivados

   Compatibilidad: TODOS los nombres legacy (--bg, --bg2, --surface,
   --border, --text, --dim, --white, --accent, --accent2, --green,
   --purple, --yellow, --red, --r, --t, --shadow, --space-*, --radius-*,
   --shadow-*, --container-max, --nav-height) siguen existiendo —
   index/carrito/pagar los consumen — y ahora apuntan al sistema claro.
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Paleta canónica (DESIGN.md §4) ────────────────────────── */
  --primary:        #0F766E;
  --primary-hover:  #0B5E58;
  --primary-active: #084946;
  --highlight:      #D7ECE8;
  --bg:             #F7F5F1;
  --surface:        #FFFFFF;
  --surface-2:      #F1EEE8;
  --border:         #DDD7CD;
  --text:           #26231E;
  --muted:          #6F6A63;
  --success:        #15803D;
  --success-bg:     #E3F2E6;
  --warning:        #B45309;
  --warning-bg:     #FBEEDC;
  --error:          #B91C1C;
  --error-bg:       #FBE3E3;
  --info:           #0369A1;

  /* ── Alias legacy de color ─────────────────────────────────── */
  --bg2:     var(--surface-2);
  --dim:     var(--muted);
  --white:   var(--text);          /* "texto destacado" en el sistema claro */
  --accent:  var(--primary);
  --accent2: var(--primary-hover);
  --green:   var(--success);
  --purple:  var(--primary);
  --yellow:  var(--warning);
  --red:     var(--error);

  /* Colores de marca de terceros (restringidos a su canal) */
  --brand-telegram: #229ED9;
  --brand-whatsapp: #25D366;

  /* ── Tipografía (DESIGN.md §5: Satoshi > Inter fallback) ───── */
  --font-sans: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Espaciado (escala legada, se conserva) ────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Radios (DESIGN.md §6: 10 card · 8 control · 6 chip) ───── */
  --radius-card: 10px;
  --radius-ctl:  8px;
  --radius-chip: 6px;
  --r:           10px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Transiciones (DESIGN.md §8) ───────────────────────────── */
  --t:      0.14s ease;
  --t-fast: 0.12s ease;
  --t-slow: 0.22s ease;

  /* ── Sombras: profundidad por capas, no por drama ──────────── */
  --shadow:    0 1px 3px rgba(38,35,30,0.06);
  --shadow-sm: 0 1px 3px rgba(38,35,30,0.06);
  --shadow-md: 0 4px 16px rgba(38,35,30,0.08);
  --shadow-lg: 0 12px 32px rgba(38,35,30,0.10);
  --shadow-glow-accent: 0 0 0 3px rgba(15,118,110,0.15);

  /* ── Layout ────────────────────────────────────────────────── */
  --container-max: 1120px;
  --nav-height:    64px;
}

/* ── Modo oscuro: mismos tokens, derivados (soporte, no identidad) ── */
[data-theme="dark"] {
  color-scheme: dark;

  --primary:        #4F98A3;       /* teal claro de referencia sobre oscuro */
  --primary-hover:  #63ABB5;
  --primary-active: #3C7E88;
  --highlight:      rgba(79,152,163,0.16);
  --bg:             #171512;
  --surface:        #201D19;
  --surface-2:      #1B1916;
  --border:         #37332D;
  --text:           #F0EEE9;
  --muted:          #9B958C;
  --success:        #6FBF73;
  --success-bg:     rgba(111,191,115,0.14);
  --warning:        #E0A94E;
  --warning-bg:     rgba(224,169,78,0.14);
  --error:          #E06C75;
  --error-bg:       rgba(224,108,117,0.14);
  --info:           #62A8DC;

  --shadow:    0 1px 3px rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.50);
  --shadow-glow-accent: 0 0 0 3px rgba(79,152,163,0.25);
}