/* ============================================================================
   IMOO IWX — Shared theme tokens (light + dark) and component helpers.
   Colors are exposed as space-separated RGB channels so Tailwind can apply
   opacity modifiers (e.g. bg-surface-container/60). The Tailwind config maps
   each token to rgb(var(--token) / <alpha-value>).

   Default (:root) = DARK (preserves the original dark-mode-first design).
   [data-theme="light"] flips the whole system to the light palette.
   ========================================================================== */

:root {
  /* ── DARK palette (original design system) ───────────────────────────── */
  --background: 11 19 38;
  --on-background: 218 226 253;
  --surface: 11 19 38;
  --surface-dim: 11 19 38;
  --surface-bright: 49 57 77;
  --surface-container-lowest: 6 14 32;
  --surface-container-low: 19 27 46;
  --surface-container: 23 31 51;
  --surface-container-high: 34 42 61;
  --surface-container-highest: 45 52 73;
  --surface-variant: 45 52 73;
  --on-surface: 218 226 253;
  --on-surface-variant: 187 202 191;
  --outline: 134 148 138;
  --outline-variant: 60 74 66;
  --surface-tint: 78 222 163;

  --primary: 78 222 163;
  --on-primary: 0 56 36;
  --primary-container: 16 185 129;
  --on-primary-container: 0 66 43;
  --primary-fixed: 111 251 190;
  --primary-fixed-dim: 78 222 163;
  --on-primary-fixed: 0 33 19;
  --on-primary-fixed-variant: 0 82 54;
  --inverse-primary: 0 108 73;

  --secondary: 168 207 188;
  --on-secondary: 17 55 41;
  --secondary-container: 41 78 63;
  --on-secondary-container: 150 190 171;
  --secondary-fixed: 195 236 215;
  --secondary-fixed-dim: 168 207 188;
  --on-secondary-fixed: 0 33 21;
  --on-secondary-fixed-variant: 41 78 63;

  --tertiary: 69 223 164;
  --on-tertiary: 0 56 37;
  --tertiary-container: 0 185 130;
  --on-tertiary-container: 0 66 44;
  --tertiary-fixed: 104 252 191;
  --tertiary-fixed-dim: 69 223 164;
  --on-tertiary-fixed: 0 33 20;
  --on-tertiary-fixed-variant: 0 81 55;

  --error: 255 180 171;
  --on-error: 105 0 5;
  --error-container: 147 0 10;
  --on-error-container: 255 218 214;

  --inverse-surface: 218 226 253;
  --inverse-on-surface: 40 48 68;

  /* helpers */
  --glass-bg: 23 31 51;
  --glass-bg-alpha: 0.55;
  --glass-border-alpha: 0.08;
  --pattern-alpha: 0.025;
  --logo-dark-display: block;
  --logo-light-display: none;
}

[data-theme="light"] {
  /* ── LIGHT palette — tinted (cool teal/slate), not stark white ─────────── */
  --background: 228 238 240;
  --on-background: 13 30 44;
  --surface: 228 238 240;
  --surface-dim: 213 227 231;
  --surface-bright: 244 250 250;
  --surface-container-lowest: 240 247 248;
  --surface-container-low: 224 235 238;
  --surface-container: 217 230 234;
  --surface-container-high: 206 222 227;
  --surface-container-highest: 194 213 220;
  --surface-variant: 200 218 224;
  --on-surface: 14 30 46;
  --on-surface-variant: 64 88 104;
  --outline: 118 142 156;
  --outline-variant: 182 202 210;
  --surface-tint: 5 150 105;

  --primary: 5 150 105;
  --on-primary: 255 255 255;
  --primary-container: 16 185 129;
  --on-primary-container: 0 56 36;
  --primary-fixed: 4 120 87;
  --primary-fixed-dim: 5 150 105;
  --on-primary-fixed: 255 255 255;
  --on-primary-fixed-variant: 6 78 59;
  --inverse-primary: 111 251 190;

  --secondary: 15 118 110;
  --on-secondary: 255 255 255;
  --secondary-container: 209 250 229;
  --on-secondary-container: 6 95 70;
  --secondary-fixed: 209 250 229;
  --secondary-fixed-dim: 167 243 208;
  --on-secondary-fixed: 2 44 34;
  --on-secondary-fixed-variant: 6 95 70;

  --tertiary: 13 148 136;
  --on-tertiary: 255 255 255;
  --tertiary-container: 153 246 228;
  --on-tertiary-container: 4 47 46;
  --tertiary-fixed: 204 251 241;
  --tertiary-fixed-dim: 94 234 212;
  --on-tertiary-fixed: 2 44 34;
  --on-tertiary-fixed-variant: 15 118 110;

  --error: 220 38 38;
  --on-error: 255 255 255;
  --error-container: 254 226 226;
  --on-error-container: 127 29 29;

  --inverse-surface: 31 41 55;
  --inverse-on-surface: 241 245 249;

  --glass-bg: 232 243 244;
  --glass-bg-alpha: 0.70;
  --glass-border-alpha: 0.14;
  --pattern-alpha: 0.05;
  --logo-dark-display: none;
  --logo-light-display: block;
}

/* Smooth cross-fade when toggling themes. */
html.theme-anim,
html.theme-anim body,
html.theme-anim body * {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, fill 0.2s ease;
}

/* ── Brand logo swap (place both <img> variants; CSS shows the right one) ── */
.imoo-logo { width: auto; display: block; }
.imoo-logo--dark { display: var(--logo-dark-display); }
.imoo-logo--light { display: var(--logo-light-display); }

/* ── Reusable component helpers (theme-aware) ───────────────────────────── */
.glass-panel {
  background-color: rgb(var(--glass-bg) / var(--glass-bg-alpha));
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--on-surface) / var(--glass-border-alpha));
}
.ambient-glow-primary { box-shadow: 0 0 24px 0 rgb(var(--primary) / 0.10); }
.glow-effect { box-shadow: 0 0 24px rgb(var(--primary) / 0.18); }

/* Abstract chart image (green glow on black). Screen-blend on dark; on light
   show it as an opaque dark chart canvas so it stays visible. */
.chart-viz { mix-blend-mode: screen; }
[data-theme="light"] .chart-viz { mix-blend-mode: normal; opacity: 1 !important; }

.bg-pattern {
  background-image:
    linear-gradient(to right, rgb(var(--on-surface) / var(--pattern-alpha)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--on-surface) / var(--pattern-alpha)) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ambient-glow-tl {
  position: absolute; top: -10%; left: -10%; width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgb(var(--primary) / 0.06) 0%, transparent 70%);
  border-radius: 50%; z-index: 0; pointer-events: none;
}
.ambient-glow-br {
  position: absolute; bottom: -10%; right: -10%; width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgb(var(--primary) / 0.04) 0%, transparent 70%);
  border-radius: 50%; z-index: 0; pointer-events: none;
}
/* Light mode: warmer, dual-tone (emerald + teal) auroras so the page reads as
   "light with colour", not flat white. */
[data-theme="light"] .ambient-glow-tl {
  background: radial-gradient(circle, rgb(16 185 129 / 0.16) 0%, transparent 70%);
}
[data-theme="light"] .ambient-glow-br {
  background: radial-gradient(circle, rgb(13 148 136 / 0.14) 0%, transparent 70%);
}
/* Page-wide soft aurora for light mode (dashboards have no glow elements). */
[data-theme="light"] body {
  background-image:
    radial-gradient(55vw 55vw at 8% -12%, rgb(16 185 129 / 0.12), transparent 60%),
    radial-gradient(50vw 50vw at 108% 4%, rgb(20 130 180 / 0.10), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Inputs: autofill + caret adapt to theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgb(var(--surface-container)) inset !important;
  -webkit-text-fill-color: rgb(var(--on-surface)) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Scrollbars. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--surface-variant)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--outline-variant)); }

/* ── Theme toggle & language switcher controls ──────────────────────────── */
.imoo-control {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgb(var(--on-surface-variant)); transition: color 0.2s, background-color 0.2s;
}
.imoo-control:hover { color: rgb(var(--primary)); }

.imoo-lang {
  appearance: none; -webkit-appearance: none;
  background: rgb(var(--surface-container));
  color: rgb(var(--on-surface));
  border: 1px solid rgb(var(--outline-variant) / 0.4);
  border-radius: 0.5rem; padding: 0.35rem 1.75rem 0.35rem 0.6rem;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386948a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center;
}
.imoo-lang:focus { outline: none; border-color: rgb(var(--primary) / 0.6); }
/* Show the icon for the theme you'll switch TO: sun in dark, moon in light. */
.theme-toggle .icon-sun { display: var(--logo-dark-display); }
.theme-toggle .icon-moon { display: var(--logo-light-display); }