/* Conservative Techie — full theme systems (fonts, color, chrome, motion) */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600;700&family=Manrope:wght@400;600;700&family=Share+Tech+Mono&family=Sora:wght@500;700&family=Source+Code+Pro:wght@400;700&family=Space+Grotesk:wght@500;700&family=VT323&display=swap");

/* ========== RETROTECH — green matrix command OS ========== */
:root,
html[data-theme="retrotech"] {
  --ct-bg: #020805;
  --ct-bg-elevated: #041008;
  --ct-bg-panel: #07150c;
  --ct-bg-hover: rgba(0, 255, 65, 0.07);
  --ct-bg-active: rgba(0, 255, 65, 0.14);
  --ct-border: #0d3b1c;
  --ct-border-strong: #14522a;
  --ct-text: #b7ffc8;
  --ct-text-muted: #5f9a6d;
  --ct-text-dim: #3d6b48;
  --ct-accent: #00ff41;
  --ct-accent-2: #9effb0;
  --ct-accent-rgb: 0, 255, 65;
  --ct-danger: #ff3b3b;
  --ct-warn: #ffd000;
  --ct-font: "Share Tech Mono", "Source Code Pro", ui-monospace, monospace;
  --ct-font-display: "VT323", "Share Tech Mono", monospace;
  --ct-radius: 0px;
  --ct-radius-lg: 0px;
  --ct-shadow: 0 0 0 1px rgba(0, 255, 65, 0.18), 0 0 28px rgba(0, 255, 65, 0.12);
  --ct-glow: drop-shadow(0 0 6px rgba(0, 255, 65, 0.55));
  --ct-matrix-opacity: 0.07;
  --ct-status-chip-bg: #0a2414;
  --ct-status-chip-fg: #00ff41;
  --ct-scrollbar: #14522a;
  --ct-overlay: rgba(2, 8, 5, 0.94);
  --ct-letter-spacing: 0.08em;
  --ct-btn-transform: uppercase;
  --ct-ui-weight: 400;
  color-scheme: dark;
}

/* ========== NEXUS — modern tech operations ========== */
html[data-theme="nexus"] {
  --ct-bg: #0b1220;
  --ct-bg-elevated: #111a2e;
  --ct-bg-panel: #162238;
  --ct-bg-hover: rgba(56, 189, 248, 0.1);
  --ct-bg-active: rgba(56, 189, 248, 0.18);
  --ct-border: #243552;
  --ct-border-strong: #3b5278;
  --ct-text: #e8eef8;
  --ct-text-muted: #93a4c3;
  --ct-text-dim: #647796;
  --ct-accent: #38bdf8;
  --ct-accent-2: #7dd3fc;
  --ct-accent-rgb: 56, 189, 248;
  --ct-danger: #fb7185;
  --ct-warn: #fbbf24;
  --ct-font: "DM Sans", "Segoe UI", sans-serif;
  --ct-font-display: "Space Grotesk", "DM Sans", sans-serif;
  --ct-radius: 12px;
  --ct-radius-lg: 18px;
  --ct-shadow: 0 18px 50px rgba(2, 10, 28, 0.55);
  --ct-glow: none;
  --ct-matrix-opacity: 0;
  --ct-status-chip-bg: rgba(56, 189, 248, 0.14);
  --ct-status-chip-fg: #7dd3fc;
  --ct-scrollbar: #3b5278;
  --ct-overlay: rgba(11, 18, 32, 0.88);
  --ct-letter-spacing: 0.01em;
  --ct-btn-transform: none;
  --ct-ui-weight: 500;
  color-scheme: dark;
}

/* ========== PHOSPHOR — amber CRT terminal ========== */
html[data-theme="phosphor"] {
  --ct-bg: #0a0702;
  --ct-bg-elevated: #140f06;
  --ct-bg-panel: #1a1408;
  --ct-bg-hover: rgba(255, 176, 0, 0.1);
  --ct-bg-active: rgba(255, 176, 0, 0.18);
  --ct-border: #4a3510;
  --ct-border-strong: #7a5618;
  --ct-text: #ffd27a;
  --ct-text-muted: #b8893a;
  --ct-text-dim: #7a5a22;
  --ct-accent: #ffb000;
  --ct-accent-2: #ffe08a;
  --ct-accent-rgb: 255, 176, 0;
  --ct-danger: #ff6b4a;
  --ct-warn: #ffe066;
  --ct-font: "IBM Plex Mono", ui-monospace, monospace;
  --ct-font-display: "IBM Plex Mono", ui-monospace, monospace;
  --ct-radius: 2px;
  --ct-radius-lg: 4px;
  --ct-shadow: 0 0 0 1px rgba(255, 176, 0, 0.22), 0 0 32px rgba(255, 176, 0, 0.16);
  --ct-glow: drop-shadow(0 0 8px rgba(255, 176, 0, 0.55));
  --ct-matrix-opacity: 0.05;
  --ct-status-chip-bg: #3a2a0c;
  --ct-status-chip-fg: #ffd27a;
  --ct-scrollbar: #7a5618;
  --ct-overlay: rgba(10, 7, 2, 0.94);
  --ct-letter-spacing: 0.06em;
  --ct-btn-transform: uppercase;
  --ct-ui-weight: 600;
  color-scheme: dark;
}

/* ========== ICEBERG — light arctic glass (intentionally not dark) ========== */
html[data-theme="iceberg"] {
  --ct-bg: #eef6fa;
  --ct-bg-elevated: #f7fcff;
  --ct-bg-panel: #ffffff;
  --ct-bg-hover: rgba(14, 116, 144, 0.08);
  --ct-bg-active: rgba(14, 116, 144, 0.14);
  --ct-border: #c5d9e4;
  --ct-border-strong: #8eb0c2;
  --ct-text: #0f2a38;
  --ct-text-muted: #4a6b7c;
  --ct-text-dim: #7a97a6;
  --ct-accent: #0e7490;
  --ct-accent-2: #155e75;
  --ct-accent-rgb: 14, 116, 144;
  --ct-danger: #be123c;
  --ct-warn: #b45309;
  --ct-font: "Manrope", "Segoe UI", sans-serif;
  --ct-font-display: "Sora", "Manrope", sans-serif;
  --ct-radius: 14px;
  --ct-radius-lg: 22px;
  --ct-shadow: 0 12px 40px rgba(15, 42, 56, 0.08);
  --ct-glow: none;
  --ct-matrix-opacity: 0;
  --ct-status-chip-bg: rgba(14, 116, 144, 0.1);
  --ct-status-chip-fg: #0e7490;
  --ct-scrollbar: #8eb0c2;
  --ct-overlay: rgba(238, 246, 250, 0.92);
  --ct-letter-spacing: 0.02em;
  --ct-btn-transform: none;
  --ct-ui-weight: 600;
  color-scheme: light;
}

/* ========== Shared chrome ========== */
html[data-theme] body {
  background-color: var(--ct-bg) !important;
  color: var(--ct-text) !important;
  font-family: var(--ct-font) !important;
  letter-spacing: var(--ct-letter-spacing);
  font-weight: var(--ct-ui-weight);
  transition: background-color 0.35s ease, color 0.35s ease;
}

html[data-theme] #threat-dashboard {
  background-color: color-mix(in srgb, var(--ct-bg-elevated) 94%, transparent) !important;
  color: var(--ct-text) !important;
}

html[data-theme] .matrix-bg {
  opacity: var(--ct-matrix-opacity) !important;
}

html[data-theme="nexus"] .matrix-bg,
html[data-theme="iceberg"] .matrix-bg {
  display: none !important;
}

html[data-theme] .matrix-rain {
  color: rgba(var(--ct-accent-rgb), 0.45) !important;
}

html[data-theme] .header-title,
html[data-theme] .glow-text,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] .section-header h2 {
  font-family: var(--ct-font-display) !important;
  color: var(--ct-accent) !important;
  letter-spacing: var(--ct-letter-spacing);
}

html[data-theme="retrotech"] .header-title,
html[data-theme="retrotech"] .glow-text {
  font-size: 1.35em;
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.55) !important;
  text-transform: uppercase;
}

html[data-theme="phosphor"] .header-title,
html[data-theme="phosphor"] .glow-text {
  text-shadow: 0 0 14px rgba(255, 176, 0, 0.55) !important;
  text-transform: uppercase;
}

html[data-theme="nexus"] .header-title,
html[data-theme="nexus"] .glow-text {
  text-shadow: none !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}

html[data-theme="iceberg"] .header-title,
html[data-theme="iceberg"] .glow-text {
  text-shadow: none !important;
  color: var(--ct-accent-2) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
}

html[data-theme] .btn-matrix,
html[data-theme] .btn-refresh,
html[data-theme] .btn-locate,
html[data-theme] #btn-locate,
html[data-theme] #btn-scan-area {
  border-color: var(--ct-accent) !important;
  color: var(--ct-accent) !important;
  background-color: color-mix(in srgb, var(--ct-bg) 88%, transparent) !important;
  border-radius: var(--ct-radius) !important;
  font-family: var(--ct-font) !important;
  text-transform: var(--ct-btn-transform) !important;
  letter-spacing: var(--ct-letter-spacing);
  box-shadow: var(--ct-shadow);
}

html[data-theme] .kpi-board,
html[data-theme] .control-panel,
html[data-theme] .status-board,
html[data-theme] .section,
html[data-theme] .tool-card,
html[data-theme] .feed-btn,
html[data-theme] .cam-card,
html[data-theme] .status-panel {
  border-color: var(--ct-border) !important;
  background-color: var(--ct-bg-panel) !important;
  border-radius: var(--ct-radius-lg) !important;
  box-shadow: var(--ct-shadow);
  color: var(--ct-text) !important;
}

html[data-theme] .section-header,
html[data-theme] .header {
  border-color: var(--ct-border) !important;
}

html[data-theme] .header-subtitle,
html[data-theme] .metric-lbl,
html[data-theme] .status-desc {
  color: var(--ct-text-muted) !important;
  font-family: var(--ct-font) !important;
}

html[data-theme] .metric-val,
html[data-theme] .kpi-val {
  font-family: var(--ct-font-display) !important;
}

html[data-theme] .filter-select,
html[data-theme] .dropdown-button,
html[data-theme] .search-box input,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {
  background-color: var(--ct-bg) !important;
  border-color: var(--ct-border-strong) !important;
  color: var(--ct-text) !important;
  border-radius: var(--ct-radius) !important;
  font-family: var(--ct-font) !important;
}

html[data-theme] .filter-select,
html[data-theme] .dropdown-button {
  color: var(--ct-accent) !important;
}

html[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--ct-scrollbar) !important;
}

/* Soften Tailwind hard greens/cyans toward the active accent where safe */
html[data-theme="nexus"] .text-\[\#00ff41\],
html[data-theme="iceberg"] .text-\[\#00ff41\],
html[data-theme="phosphor"] .text-\[\#00ff41\] {
  color: var(--ct-accent) !important;
}

html[data-theme="nexus"] .border-\[\#00ff41\],
html[data-theme="iceberg"] .border-\[\#00ff41\],
html[data-theme="phosphor"] .border-\[\#00ff41\] {
  border-color: var(--ct-accent) !important;
}

html[data-theme="nexus"] .bg-\[\#060b19\],
html[data-theme="iceberg"] .bg-\[\#060b19\],
html[data-theme="phosphor"] .bg-\[\#060b19\] {
  background-color: var(--ct-bg-elevated) !important;
}

html[data-theme="nexus"] .bg-\[\#040814\],
html[data-theme="iceberg"] .bg-\[\#040814\],
html[data-theme="phosphor"] .bg-\[\#040814\] {
  background-color: var(--ct-bg) !important;
}

/* ----- Theme-specific atmospheres ----- */
html[data-theme="nexus"] #threat-dashboard,
html[data-theme="nexus"] body {
  background-image:
    radial-gradient(1100px 520px at 8% -12%, rgba(56, 189, 248, 0.16), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(125, 211, 252, 0.08), transparent 50%) !important;
  background-attachment: fixed;
}

html[data-theme="iceberg"] #threat-dashboard,
html[data-theme="iceberg"] body {
  background-image:
    radial-gradient(900px 420px at 0% 0%, rgba(125, 211, 252, 0.35), transparent 55%),
    radial-gradient(700px 380px at 100% 10%, rgba(14, 116, 144, 0.12), transparent 50%),
    linear-gradient(180deg, #e8f4f8 0%, #f7fcff 40%, #eef6fa 100%) !important;
  background-attachment: fixed;
}

html[data-theme="phosphor"] body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 176, 0, 0.03) 0px,
      rgba(255, 176, 0, 0.03) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: screen;
  opacity: 0.55;
}

html[data-theme="retrotech"] body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  box-shadow: inset 0 0 120px rgba(0, 255, 65, 0.08);
}

html[data-theme="phosphor"] .status-indicator,
html[data-theme="retrotech"] .status-indicator {
  filter: var(--ct-glow);
  border-radius: var(--ct-radius) !important;
  letter-spacing: 0.12em;
}

html[data-theme="nexus"] .status-indicator,
html[data-theme="iceberg"] .status-indicator {
  border-radius: 999px !important;
  letter-spacing: 0.04em;
  font-family: var(--ct-font-display) !important;
}

html[data-theme="iceberg"] .cam-label,
html[data-theme="iceberg"] .hud-header,
html[data-theme="iceberg"] .status-panel {
  color: var(--ct-text) !important;
}

html[data-theme="iceberg"] #btn-locate svg,
html[data-theme="iceberg"] #btn-scan-area svg {
  fill: var(--ct-accent) !important;
}

/* Shell theme picker inherits tokens */
html[data-theme] .theme-btn {
  font-family: var(--ct-font) !important;
}

html[data-theme="retrotech"] .theme-btn strong,
html[data-theme="phosphor"] .theme-btn strong {
  font-family: var(--ct-font-display) !important;
  text-transform: uppercase;
}

html[data-theme="nexus"] .theme-btn strong,
html[data-theme="iceberg"] .theme-btn strong {
  font-family: var(--ct-font-display) !important;
}