/* ============================================================
   DANGOFE OS LIQUID V2 — themes.css
   Variables de tema: Oscuro (por defecto) / Claro / Auto
   El modo "auto" se resuelve en JS asignando data-theme
   según prefers-color-scheme.
   ============================================================ */

/* ------------------------------------------------------------
   TEMA OSCURO (por defecto)
   ------------------------------------------------------------ */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  /* Fondos */
  --bg-page: #060608;
  --bg-app: radial-gradient(ellipse at 40% -10%, #0e0c14 0%, #09090f 45%, #060608 100%);
  --bg-elevated: rgba(22, 20, 26, 0.85);
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-hover: rgba(255, 255, 255, 0.07);

  /* Texto */
  --text-primary: #f2f0ee;
  --text-secondary: #b8b3ad;
  --text-muted: #7d7871;

  /* Bordes */
  --border-app: rgba(200, 210, 235, 0.16);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Liquid Glass — componentes RGB del vidrio (se combinan
     con las opacidades de liquid-glass.css) */
  --glass-rgb: 10, 12, 18;
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-top: rgba(255, 255, 255, 0.26);
  --glass-glow: rgba(var(--lava-glow-rgb), 0.07);
  --glass-shadow: rgba(0, 0, 0, 0.55);
  --glass-reflection: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.015) 28%,
    transparent 55%
  );

  /* Sombras */
  --shadow-app: 0 30px 80px rgba(0, 0, 0, 0.7), 0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.6);

  /* Scrollbar */
  --scrollbar-thumb: rgba(255, 255, 255, 0.14);

  /* Gráficas */
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-label: #8d8781;

  /* Fase 3B.3 — Acción principal en OSCURO: fondo blanco, texto negro */
  --action-primary-bg: #ffffff;
  --action-primary-text: #111111;
  --action-primary-border: rgba(255, 255, 255, 0.35);
  --accent-rgb: 235, 235, 240;
}

/* ------------------------------------------------------------
   TEMA CLARO
   ------------------------------------------------------------ */
/* Fase 3C.1: :root[data-theme] eleva la especificidad para que estos
   valores GANEN a los fallbacks de :root en core.css (que carga después). */
:root[data-theme='light'],
[data-theme='light'] {
  color-scheme: light;

  /* Fondos — Fase 3B.3: base más limpia y luminosa (#F4F6F9) */
  --bg-page: #f4f6f9;
  --bg-app: radial-gradient(ellipse at 50% 0%, #f7f9fc 0%, #f2f4f8 50%, #eef1f6 100%);
  --bg-elevated: rgba(255, 255, 255, 0.92);
  --bg-input: rgba(30, 32, 40, 0.05);
  --bg-hover: rgba(30, 32, 40, 0.06);

  /* Texto */
  --text-primary: #23252c;
  --text-secondary: #565a64;
  --text-muted: #8b8f99;

  /* Bordes */
  --border-app: rgba(35, 40, 55, 0.16);
  --border-soft: rgba(35, 40, 55, 0.09);
  --border-strong: rgba(35, 40, 55, 0.16);

  /* Liquid Glass — Fase 3B.3: protagonismo de transparencia + blur,
     borde luminoso fino y sombra exterior BAJA (nada de nubes grises). */
  --glass-rgb: 255, 255, 255;
  --glass-surface-rgb: 255, 255, 255;
  --glass-border: rgba(35, 40, 55, 0.11);
  /* Fase 3E: contorno blanco superior atenuado (antes 0.42) para evitar
     bordes blancos fuertes en claro; el tema oscuro no se toca. */
  --glass-border-top: rgba(255, 255, 255, 0.26);
  --glass-glow: rgba(var(--lava-glow-rgb), 0.05);
  --glass-shadow: rgba(15, 23, 42, 0.09);
  --glass-reflection: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 28%,
    transparent 55%
  );

  /* Sombras — mínimas (Fase 3C.1): el vidrio se define por
     transparencia/blur/borde/reflejo, no por sombras grandes */
  --shadow-app: 0 10px 26px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 3px 10px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 8px 22px rgba(15, 23, 42, 0.10);

  /* Scrollbar */
  --scrollbar-thumb: rgba(40, 45, 60, 0.2);

  /* Gráficas */
  --chart-grid: rgba(40, 45, 60, 0.08);
  --chart-label: #6a6e78;

  /* Fase 3B.3 — Acción principal en CLARO: fondo negro, texto blanco */
  --action-primary-bg: #111111;
  --action-primary-text: #ffffff;
  --action-primary-border: rgba(0, 0, 0, 0.15);
  --accent-rgb: 17, 17, 17;
}

/* ------------------------------------------------------------
   Fase 3E.1 — MODO CLARO: sombras y contornos suavizados.
   En claro, el vidrio se define por transparencia + blur + borde
   gris fino + reflejo blanco solo en el borde superior; las
   sombras proyectadas se acortan y aclaran (nada de nubes grises
   ni contornos fuertes). El TEMA OSCURO NO SE TOCA.
   ------------------------------------------------------------ */
[data-theme='light'] .btn--primary { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14); }
[data-theme='light'] .btn--primary:hover { box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18); }
[data-theme='light'] .tab.is-active { box-shadow: 0 1px 5px rgba(15, 23, 42, 0.14); }
[data-theme='light'] .toast { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); }
[data-theme='light'] .info-popover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); }
[data-theme='light'] .config-range::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22); }
[data-theme='light'] .cfgx-restore-menu,
[data-theme='light'] .hero-search-pop,
[data-theme='light'] .period-menu { box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); }
[data-theme='light'] .gc-popover { box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); }
[data-theme='light'] .widget-badge { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); }