/* ============================================================
   BASE — SISTEMA DE TEMAS
   Cada tema define las mismas variables. El resto del CSS
   nunca usa colores directos, solo variables.
   ============================================================ */

/* CLARO (default) */
:root,
[data-theme="claro"] {
  --bg:        #F4F4F2;
  --surface:   #FFFFFF;
  --surface-2: #EFEFED;
  --surface-3: #E8E8E5;
  --accent:    #111111;
  --accent-2:  #333333;
  --accent-fg: #FFFFFF;
  --green:     #1A5C35;
  --green-bg:  #E6F4EC;
  --warn:      #B83232;
  --warn-bg:   #FDEAEA;
  --text:      #111111;
  --text-2:    #555555;
  --text-3:    #AAAAAA;
  --border:    #E2E2DF;
  --border-2:  #D0D0CC;
  --shadow:    0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* OSCURO */
[data-theme="oscuro"] {
  --bg:        #111111;
  --surface:   #1C1C1C;
  --surface-2: #252525;
  --surface-3: #2E2E2E;
  --accent:    #F0F0EE;
  --accent-2:  #CCCCCC;
  --accent-fg: #111111;
  --green:     #4ADE80;
  --green-bg:  rgba(74,222,128,0.1);
  --warn:      #F87171;
  --warn-bg:   rgba(248,113,113,0.1);
  --text:      #F0F0EE;
  --text-2:    #888888;
  --text-3:    #555555;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --shadow:    0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* AMANECER */
[data-theme="amanecer"] {
  --bg:        #FEF6F0;
  --surface:   #FFFFFF;
  --surface-2: #FAF0E8;
  --surface-3: #F5E5D8;
  --accent:    #C45D28;
  --accent-2:  #A04820;
  --accent-fg: #FFFFFF;
  --green:     #2D7A4F;
  --green-bg:  #E6F5EC;
  --warn:      #C0392B;
  --warn-bg:   #FDEAEA;
  --text:      #2C1208;
  --text-2:    #7A5540;
  --text-3:    #C4A898;
  --border:    #EDD8C8;
  --border-2:  #DFC4B0;
  --shadow:    0 2px 12px rgba(196,93,40,0.08);
  --shadow-lg: 0 8px 32px rgba(196,93,40,0.14);
}

/* NOCHE */
[data-theme="noche"] {
  --bg:        #080C18;
  --surface:   #0E1424;
  --surface-2: #151C30;
  --surface-3: #1C253C;
  --accent:    #7B9FFF;
  --accent-2:  #5A80FF;
  --accent-fg: #080C18;
  --green:     #4ECDC4;
  --green-bg:  rgba(78,205,196,0.1);
  --warn:      #FF6B6B;
  --warn-bg:   rgba(255,107,107,0.1);
  --text:      #E8EEFF;
  --text-2:    #7A8AAA;
  --text-3:    #4A5470;
  --border:    rgba(123,159,255,0.1);
  --border-2:  rgba(123,159,255,0.18);
  --shadow:    0 2px 16px rgba(0,0,10,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,10,0.6);
}

/* ATARDECER */
[data-theme="atardecer"] {
  --bg:        #180E20;
  --surface:   #221430;
  --surface-2: #2C1A3C;
  --surface-3: #382248;
  --accent:    #F5975A;
  --accent-2:  #E07A3A;
  --accent-fg: #180E20;
  --green:     #A8E6CF;
  --green-bg:  rgba(168,230,207,0.1);
  --warn:      #FF8FA3;
  --warn-bg:   rgba(255,143,163,0.1);
  --text:      #F8EEFF;
  --text-2:    #9A80B0;
  --text-3:    #5A4870;
  --border:    rgba(245,151,90,0.12);
  --border-2:  rgba(245,151,90,0.2);
  --shadow:    0 2px 16px rgba(20,8,30,0.5);
  --shadow-lg: 0 8px 40px rgba(20,8,30,0.65);
}

/* HOGAR CÁLIDO */
[data-theme="hogar"] {
  --bg:        #F9F4ED;
  --surface:   #FFFDF8;
  --surface-2: #F0EAE0;
  --surface-3: #E8DFD2;
  --accent:    #8B4513;
  --accent-2:  #6D340F;
  --accent-fg: #FFFFFF;
  --green:     #4A7C59;
  --green-bg:  #E8F4EC;
  --warn:      #B83232;
  --warn-bg:   #FDEAEA;
  --text:      #1E120A;
  --text-2:    #7A6050;
  --text-3:    #B8A898;
  --border:    #DDD0C0;
  --border-2:  #CCC0AC;
  --shadow:    0 2px 12px rgba(139,69,19,0.08);
  --shadow-lg: 0 8px 32px rgba(139,69,19,0.14);
}

/* OCIO */
[data-theme="ocio"] {
  --bg:        #EDFAF6;
  --surface:   #FFFFFF;
  --surface-2: #DFF5EE;
  --surface-3: #CCF0E6;
  --accent:    #0B6E58;
  --accent-2:  #085244;
  --accent-fg: #FFFFFF;
  --green:     #0B6E58;
  --green-bg:  #CCEFEA;
  --warn:      #C0392B;
  --warn-bg:   #FDEAEA;
  --text:      #061E18;
  --text-2:    #3D7A6A;
  --text-3:    #88BFB4;
  --border:    #C0E8DF;
  --border-2:  #A8DDD2;
  --shadow:    0 2px 12px rgba(11,110,88,0.08);
  --shadow-lg: 0 8px 32px rgba(11,110,88,0.12);
}

/* Transición global al cambiar tema */
body, .sidebar, .drawer, .bottombar, .product-row, .store-block,
.alert-bar, .filter-strip, .theme-panel, .apply-bar, .section-divider,
.card, .sub-card, .wish-card, .stat-card, .settings-card, .dh-subtitle {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}