:root {
  /* ── Colores ── */
  --color-bg:           #050505;
  --color-surface:      #111111;
  --color-surface-2:    #1a1a1a;
  --color-text:         #ffffff;
  --color-text-muted:   #a3a3a3;
  --color-accent:       #8b5cf6;
  --color-accent-dark:  #7c3aed;
  --color-accent-2:     #ec4899;   /* fucsia — solo acentos especiales */
  --gradient-accent:    linear-gradient(120deg, #8b5cf6 0%, #ec4899 100%);
  --gradient-accent-soft: linear-gradient(120deg, rgba(139,92,246,.14), rgba(236,72,153,.14));
  --color-success:      #10b981;
  --color-danger:       #ef4444;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.22);

  /* ── Tipografía ── */
  --font:          'Inter', system-ui, sans-serif;
  --text-xs:       0.7rem;
  --text-sm:       0.85rem;
  --text-base:     1rem;
  --text-lg:       1.25rem;
  --text-xl:       1.5rem;
  --text-2xl:      2rem;
  --text-3xl:      3rem;
  --text-4xl:      3.5rem;

  /* ── Espaciado ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Layout ── */
  --header-h:      80px;
  --cart-w:        440px;
  --drawer-w:      300px;
  --page-pad:      var(--sp-16);

  /* ── Bordes y sombras ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;
  --shadow-sm:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.80);
  --shadow-accent: 0 10px 24px rgba(139,92,246,0.30);

  /* ── Transiciones ── */
  --t-fast:   0.18s ease;
  --t-base:   0.28s ease;
  --t-slow:   0.42s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ── Z-index ── */
  --z-sticky:  50;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer:  300;
  --z-cart:    400;
  --z-modal:   600;

  /* ── Helpers rgba (theme-aware) ── */
  --color-btn-inactive:          transparent;
  --color-header-glass:          rgba(5, 5, 5, 0.75);
  --color-header-glass-scrolled: rgba(5, 5, 5, 0.95);
  --color-icon-hover-bg:         rgba(255, 255, 255, 0.06);
  --color-drawer-link-hover:     rgba(255, 255, 255, 0.05);
  --color-sticky-cta-bg:         rgba(10, 10, 10, 0.96);
  --color-bento-from:            #1c1c1c;
  --img-blend:                   lighten;
  --bento-blend:                 lighten;
}

/* ════════════════════════════════════════
   MODO CLARO — activo cuando data-theme="light"
════════════════════════════════════════ */
[data-theme="light"] {
  --color-bg:           #ffffff;
  --color-surface:      #ffffff;
  --color-surface-2:    #f0f0f0;
  --color-text:         #0a0a0a;
  --color-text-muted:   #606060;
  --color-border:       rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(0, 0, 0, 0.22);
  --shadow-sm:          0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-md:          0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:          0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-accent:      0 10px 24px rgba(139, 92, 246, 0.22);

  --color-btn-inactive:          #f0f0f0;
  --color-header-glass:          rgba(255, 255, 255, 0.90);
  --color-header-glass-scrolled: rgba(255, 255, 255, 1.00);
  --color-icon-hover-bg:         rgba(0, 0, 0, 0.06);
  --color-drawer-link-hover:     rgba(0, 0, 0, 0.05);
  --color-sticky-cta-bg:         rgba(255, 255, 255, 0.98);
  --color-bento-from:            #e8e8e8;
  --img-blend:                   multiply;
  --bento-blend:                 normal;
}

/* ── Transición suave al cambiar de tema ── */
.theme-switching,
.theme-switching * {
  transition: background-color 0.35s ease, border-color 0.3s ease,
              color 0.25s ease, box-shadow 0.3s ease !important;
}