/* Themes: light (default), dark, system, high contrast */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #ececee;
  --ink: #0d0d0f;
  --ink-2: #5f6168;
  --line: #e6e6e9;
  --accent: #0d0d0f; --accent-grad: #0d0d0f; --accent-grad-hover: #2c2c31;
  --accent-hover: #2c2c31;
  --accent-ink: #ffffff;
  --accent-soft: #f0f0f2;
  --user-bubble: #f1f1f3;
  --danger: #b3261e;
  --danger-soft: #fbe4e2;
  --ok: #1b7340;
  --warn: #8a5a00;
  --warn-soft: #fff1d0;
  --code-bg: #f6f6f7;
  --code-ink: #26262b;
  --focus: #1456d6;
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"],
html[data-theme="system-dark"] {
  --bg: #0e0e19; --surface: #161625; --surface-2: #1e1e33; --surface-3: #28283f;
  --ink: #ecebf6; --ink-2: #a9a8c6; --line: #2b2b45;
  --accent: #b69cff; --accent-grad: linear-gradient(135deg,#dcb2ff,#b69cff 55%,#8fc5ff); --accent-grad-hover: linear-gradient(135deg,#e8c6ff,#c7b0ff 55%,#a6d2ff); --accent-hover: #cdbaff; --accent-ink: #120d2b; --accent-soft: #2a2250;
  --user-bubble: #262444; --danger: #ff8a80; --danger-soft: #3d1f1d; --ok: #6fd39a;
  --warn: #f2c14e; --warn-soft: #3a2e12; --code-bg: #101216; --code-ink: #e6e3ee; --focus: #7cb0ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
/* "system" is resolved in JS (data-theme=system-dark) so older browsers work too; this is the CSS fallback */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --bg: #0e0e19; --surface: #161625; --surface-2: #1e1e33; --surface-3: #28283f;
    --ink: #ecebf6; --ink-2: #a9a8c6; --line: #2b2b45;
    --accent: #b69cff; --accent-grad: linear-gradient(135deg,#dcb2ff,#b69cff 55%,#8fc5ff); --accent-grad-hover: linear-gradient(135deg,#e8c6ff,#c7b0ff 55%,#a6d2ff); --accent-hover: #cdbaff; --accent-ink: #120d2b; --accent-soft: #2a2250;
    --user-bubble: #262444; --danger: #ff8a80; --danger-soft: #3d1f1d; --ok: #6fd39a;
    --warn: #f2c14e; --warn-soft: #3a2e12; --code-bg: #101216; --code-ink: #e6e3ee; --focus: #7cb0ff;
  }
}

/* High contrast (works on top of light or dark) */
html[data-contrast="high"] {
  --line: currentColor; --ink-2: var(--ink);
}
html[data-contrast="high"][data-theme="light"], html[data-contrast="high"]:not([data-theme]) {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0; --ink: #000000; --line: #000000;
  --accent: #35179a; --accent-grad: #35179a; --accent-grad-hover: #240f6e; --accent-hover: #240f6e; --accent-ink: #ffffff; --user-bubble: #e8e8e8; --focus: #0000ee;
}
html[data-contrast="high"][data-theme="dark"], html[data-contrast="high"][data-theme="system-dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #161616; --ink: #ffffff; --line: #ffffff;
  --accent: #c9b8ff; --accent-grad: #c9b8ff; --accent-grad-hover: #e0d5ff; --accent-hover: #e0d5ff; --accent-ink: #000000; --user-bubble: #1c1c1c; --focus: #66b2ff;
}
html[data-contrast="high"] .btn, html[data-contrast="high"] .menu, html[data-contrast="high"] dialog, html[data-contrast="high"] .composer { border-width: 2px; }