/* ============================================================================
 * LEXIS · css/themes.css
 * Sistema de temas dinámicos mediante variables CSS con [data-theme].
 *   dark (por defecto) · light · emerald · ocean · sunset
 * Todas las variables de color de base.css se sobreescriben aquí.
 * ==========================================================================*/

/* ============================================================== OSCURO ==== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0e14;
  --bg-2: #0f131b;
  --surface: #151a26;
  --surface-2: #1a2030;
  --surface-3: #202739;
  --elevated: #1c2334;

  --text: #e7eaf3;
  --text-dim: #98a1b8;
  --text-faint: #6b7488;

  --border: #242c3d;
  --border-strong: #313b52;
  --ring: rgba(108, 140, 255, .45);

  --accent: #6c8cff;
  --accent-strong: #8aa2ff;
  --accent-soft: rgba(108, 140, 255, .16);
  --accent-contrast: #ffffff;

  --ok: #2ecc9b;
  --ok-soft: rgba(46, 204, 155, .16);
  --warn: #f5b445;
  --warn-soft: rgba(245, 180, 69, .16);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .16);
  --info: #4ec5f1;
  --info-soft: rgba(78, 197, 241, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow: 0 8px 24px rgba(0, 0, 0, .34);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .48);
}

/* =============================================================== CLARO ==== */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fb;
  --bg-2: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f6f8fd;
  --surface-3: #eceff8;
  --elevated: #ffffff;

  --text: #131824;
  --text-dim: #5a6478;
  --text-faint: #8a93a6;

  --border: #e0e5f0;
  --border-strong: #c9d1e2;
  --ring: rgba(74, 108, 247, .35);

  --accent: #4a6cf7;
  --accent-strong: #3a58d6;
  --accent-soft: rgba(74, 108, 247, .11);
  --accent-contrast: #ffffff;

  --ok: #12996f;
  --ok-soft: rgba(18, 153, 111, .12);
  --warn: #c07a0a;
  --warn-soft: rgba(192, 122, 10, .13);
  --danger: #dc3b3b;
  --danger-soft: rgba(220, 59, 59, .12);
  --info: #1a86bb;
  --info-soft: rgba(26, 134, 187, .12);

  --shadow-sm: 0 1px 2px rgba(19, 24, 36, .06);
  --shadow: 0 6px 20px rgba(19, 24, 36, .09);
  --shadow-lg: 0 22px 50px rgba(19, 24, 36, .16);
}

[data-theme="light"] .sidebar { box-shadow: inset -1px 0 0 var(--border); }
[data-theme="light"] .toast { backdrop-filter: blur(8px); }

/* ========================================================== ESMERALDA ==== */
[data-theme="emerald"] {
  color-scheme: dark;

  --bg: #071410;
  --bg-2: #0a1a15;
  --surface: #0f231c;
  --surface-2: #142c23;
  --surface-3: #1a362b;
  --elevated: #163026;

  --text: #e2f2ea;
  --text-dim: #93b3a6;
  --text-faint: #67857a;

  --border: #1d3a30;
  --border-strong: #28503f;
  --ring: rgba(52, 211, 153, .4);

  --accent: #34d399;
  --accent-strong: #5fe3b0;
  --accent-soft: rgba(52, 211, 153, .15);
  --accent-contrast: #04140e;

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .15);
  --warn: #f0c869;
  --warn-soft: rgba(240, 200, 105, .15);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, .15);
  --info: #5eead4;
  --info-soft: rgba(94, 234, 212, .15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 24px rgba(0, 20, 14, .4);
  --shadow-lg: 0 24px 60px rgba(0, 20, 14, .5);
}

/* ============================================================== OCÉANO ==== */
[data-theme="ocean"] {
  color-scheme: dark;

  --bg: #061420;
  --bg-2: #081a28;
  --surface: #0c2233;
  --surface-2: #102b40;
  --surface-3: #14344d;
  --elevated: #0f293d;

  --text: #e2f1fb;
  --text-dim: #8db2cc;
  --text-faint: #5f8399;

  --border: #16394f;
  --border-strong: #1f4d69;
  --ring: rgba(56, 189, 248, .4);

  --accent: #38bdf8;
  --accent-strong: #67d3ff;
  --accent-soft: rgba(56, 189, 248, .15);
  --accent-contrast: #04141f;

  --ok: #2dd4bf;
  --ok-soft: rgba(45, 212, 191, .15);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .15);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, .15);
  --info: #818cf8;
  --info-soft: rgba(129, 140, 248, .15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 24px rgba(0, 16, 28, .44);
  --shadow-lg: 0 24px 60px rgba(0, 16, 28, .55);
}

/* =============================================================== CÁLIDO === */
[data-theme="sunset"] {
  color-scheme: dark;

  --bg: #160f0a;
  --bg-2: #1c130c;
  --surface: #241811;
  --surface-2: #2d1e15;
  --surface-3: #38261a;
  --elevated: #2b1d14;

  --text: #f8ece0;
  --text-dim: #c1a48d;
  --text-faint: #8f7663;

  --border: #3a2718;
  --border-strong: #523722;
  --ring: rgba(251, 146, 60, .4);

  --accent: #f59e0b;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(245, 158, 11, .16);
  --accent-contrast: #1b1105;

  --ok: #84cc16;
  --ok-soft: rgba(132, 204, 22, .15);
  --warn: #fb923c;
  --warn-soft: rgba(251, 146, 60, .16);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .16);
  --info: #fbbf24;
  --info-soft: rgba(251, 191, 36, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow: 0 8px 24px rgba(28, 12, 0, .44);
  --shadow-lg: 0 24px 60px rgba(28, 12, 0, .55);
}

/* Transición fluida de todos los colores al cambiar de tema */
body,
.sidebar,
.topbar,
.card,
.kpi,
.qcard,
.input,
.btn,
.option,
.bubble,
.modal,
.table th,
.table td,
.phase-card,
.levitner-card {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    box-shadow var(--transition-slow);
}