/*
  KX CANONICAL THEME CSS
  Scope:
  - Restores visible theme switching.
  - Uses both data-theme and data-kx-theme.
  - Does not alter navbar structure or menu items.
*/

:root,
html[data-theme="cybernetic-crimson"],
html[data-kx-theme="cybernetic-crimson"] {
  --kx-theme-bg: #160c09;
  --kx-theme-bg-2: #24120e;
  --kx-theme-panel: rgba(31, 20, 16, 0.94);
  --kx-theme-panel-2: rgba(47, 28, 22, 0.92);
  --kx-theme-text: #fff7ed;
  --kx-theme-muted: #f5c28b;
  --kx-theme-border: rgba(245, 194, 139, 0.24);
  --kx-theme-accent: #ff7a3d;
  --kx-theme-accent-2: #facc15;
  --kx-theme-nav: rgba(15, 23, 42, 0.88);
}

html[data-theme="midnight"],
html[data-kx-theme="midnight"],
html[data-theme="dark"],
html[data-kx-theme="dark"] {
  --kx-theme-bg: #020617;
  --kx-theme-bg-2: #07111f;
  --kx-theme-panel: rgba(15, 23, 42, 0.94);
  --kx-theme-panel-2: rgba(30, 41, 59, 0.88);
  --kx-theme-text: #f8fafc;
  --kx-theme-muted: #94a3b8;
  --kx-theme-border: rgba(148, 163, 184, 0.25);
  --kx-theme-accent: #38bdf8;
  --kx-theme-accent-2: #818cf8;
  --kx-theme-nav: rgba(15, 23, 42, 0.92);
}

html[data-theme="light"],
html[data-kx-theme="light"] {
  --kx-theme-bg: #f8fafc;
  --kx-theme-bg-2: #e2e8f0;
  --kx-theme-panel: rgba(255, 255, 255, 0.96);
  --kx-theme-panel-2: rgba(241, 245, 249, 0.94);
  --kx-theme-text: #0f172a;
  --kx-theme-muted: #475569;
  --kx-theme-border: rgba(51, 65, 85, 0.18);
  --kx-theme-accent: #2563eb;
  --kx-theme-accent-2: #7c3aed;
  --kx-theme-nav: rgba(255, 255, 255, 0.94);
}

html[data-theme="aurora"],
html[data-kx-theme="aurora"] {
  --kx-theme-bg: #03161d;
  --kx-theme-bg-2: #06313a;
  --kx-theme-panel: rgba(8, 47, 54, 0.94);
  --kx-theme-panel-2: rgba(6, 78, 59, 0.88);
  --kx-theme-text: #ecfeff;
  --kx-theme-muted: #67e8f9;
  --kx-theme-border: rgba(103, 232, 249, 0.25);
  --kx-theme-accent: #22d3ee;
  --kx-theme-accent-2: #34d399;
  --kx-theme-nav: rgba(8, 47, 73, 0.90);
}

html[data-theme="emerald"],
html[data-kx-theme="emerald"] {
  --kx-theme-bg: #04130c;
  --kx-theme-bg-2: #052e1a;
  --kx-theme-panel: rgba(5, 46, 26, 0.94);
  --kx-theme-panel-2: rgba(6, 78, 59, 0.88);
  --kx-theme-text: #ecfdf5;
  --kx-theme-muted: #6ee7b7;
  --kx-theme-border: rgba(110, 231, 183, 0.24);
  --kx-theme-accent: #10b981;
  --kx-theme-accent-2: #84cc16;
  --kx-theme-nav: rgba(6, 78, 59, 0.90);
}

html[data-theme="violet"],
html[data-kx-theme="violet"],
html[data-theme="prism"],
html[data-kx-theme="prism"] {
  --kx-theme-bg: #13091f;
  --kx-theme-bg-2: #211137;
  --kx-theme-panel: rgba(30, 20, 55, 0.94);
  --kx-theme-panel-2: rgba(49, 30, 90, 0.88);
  --kx-theme-text: #faf5ff;
  --kx-theme-muted: #d8b4fe;
  --kx-theme-border: rgba(216, 180, 254, 0.25);
  --kx-theme-accent: #a78bfa;
  --kx-theme-accent-2: #f0abfc;
  --kx-theme-nav: rgba(30, 20, 55, 0.90);
}

html[data-theme="amber"],
html[data-kx-theme="amber"],
html[data-theme="sovereign"],
html[data-kx-theme="sovereign"] {
  --kx-theme-bg: #171006;
  --kx-theme-bg-2: #2a1b07;
  --kx-theme-panel: rgba(42, 27, 7, 0.94);
  --kx-theme-panel-2: rgba(69, 44, 10, 0.88);
  --kx-theme-text: #fffbeb;
  --kx-theme-muted: #fcd34d;
  --kx-theme-border: rgba(252, 211, 77, 0.25);
  --kx-theme-accent: #f59e0b;
  --kx-theme-accent-2: #ef4444;
  --kx-theme-nav: rgba(42, 27, 7, 0.90);
}

/* Broad visible theme application */
html[data-theme] body,
html[data-kx-theme] body {
  background:
    radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--kx-theme-accent) 22%, transparent), transparent 34rem),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--kx-theme-accent-2) 18%, transparent), transparent 34rem),
    linear-gradient(135deg, var(--kx-theme-bg), var(--kx-theme-bg-2)) !important;
  color: var(--kx-theme-text) !important;
}

/* Existing navbar receives theme colors, but structure is untouched */
html[data-theme] #kxPreviousWorkingNavbar,
html[data-kx-theme] #kxPreviousWorkingNavbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kx-theme-nav) 94%, transparent), color-mix(in srgb, var(--kx-theme-bg-2) 86%, transparent)) !important;
  border-color: var(--kx-theme-border) !important;
  color: var(--kx-theme-text) !important;
}

html[data-theme] #kxPreviousWorkingNavbar a,
html[data-kx-theme] #kxPreviousWorkingNavbar a,
html[data-theme] #kxPreviousWorkingNavbar button,
html[data-kx-theme] #kxPreviousWorkingNavbar button,
html[data-theme] #kxPreviousWorkingNavbar select,
html[data-kx-theme] #kxPreviousWorkingNavbar select {
  color: var(--kx-theme-text) !important;
}

html[data-theme] #kxPreviousWorkingThemeToggle,
html[data-kx-theme] #kxPreviousWorkingThemeToggle {
  cursor: pointer !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--kx-theme-accent) 35%, transparent) !important;
}

/* Main visual sections receive theme changes without structural changes */
html[data-theme] main,
html[data-kx-theme] main,
html[data-theme] .ac-page,
html[data-kx-theme] .ac-page,
html[data-theme] .kx-page,
html[data-kx-theme] .kx-page {
  color: var(--kx-theme-text) !important;
}

html[data-theme] .kx-card,
html[data-kx-theme] .kx-card,
html[data-theme] .ac-card,
html[data-kx-theme] .ac-card,
html[data-theme] .ac-product,
html[data-kx-theme] .ac-product,
html[data-theme] .ac-panel,
html[data-kx-theme] .ac-panel,
html[data-theme] .kx-hero-card,
html[data-kx-theme] .kx-hero-card {
  background: var(--kx-theme-panel) !important;
  border-color: var(--kx-theme-border) !important;
  color: var(--kx-theme-text) !important;
}

html[data-theme] .ac-btn.primary,
html[data-kx-theme] .ac-btn.primary,
html[data-theme] .kx-btn-primary,
html[data-kx-theme] .kx-btn-primary {
  background: linear-gradient(135deg, var(--kx-theme-accent), var(--kx-theme-accent-2)) !important;
}