/* ── Shared design tokens (driven by theme --*-hex variables) ──────────
   The --*-hex tokens are mutated by the theme switcher (/js/theme.js);
   everything else derives from them so theme changes propagate to the
   whole UI. Used by both index.html and app.html. */
:root {
  /* Hex tokens — these are mutated by the theme switcher. */
  --bg-hex: #111412;
  --panel-hex: #17211a;
  --panel-2-hex: #1f2c24;
  --border-hex: #2a3a30;
  --text-hex: #e6efe9;
  --muted-hex: #9ab2a3;
  --accent-hex: #6affa6;
  --accent-2-hex: #4fe08b;
  --accent-3-hex: #9cffb5;
  --accent-fg-hex: #08120b;
  --ok-hex: #4ade80;
  --err-hex: #f87171;
  --warn-hex: #fbbf24;

  /* Aliases — everything else derives from the hex tokens so theme
     changes propagate to the whole UI. */
  --bg: var(--bg-hex);
  --bg-2: var(--panel-2-hex);
  --panel: var(--panel-hex);
  --panel-2: var(--panel-2-hex);
  --border: var(--border-hex);
  --line: color-mix(in oklab, var(--border-hex), transparent 25%);
  --line-soft: color-mix(in oklab, var(--border-hex), transparent 60%);
  --text: var(--text-hex);
  --fg: var(--text-hex);
  --fg-2: color-mix(in oklab, var(--text-hex), var(--muted-hex) 45%);
  --muted: var(--muted-hex);
  --accent: var(--accent-hex);
  --accent-2: var(--accent-2-hex);
  --accent-3: var(--accent-3-hex);
  --accent-fg: var(--accent-fg-hex);
  --accent-soft: color-mix(in oklab, var(--accent-hex), transparent 78%);
  --ok: var(--ok-hex);
  --err: var(--err-hex);
  --warn: var(--warn-hex);
  --danger: var(--err-hex);
  --lane-w: 360px;

  --scroll-thumb: color-mix(in oklab, var(--border-hex), var(--muted-hex) 30%);
  --scroll-thumb-hover: var(--accent-hex);
  --scroll-track: color-mix(in oklab, var(--bg-hex), black 20%);
  --field-affix: var(--scroll-track);
  --message-bg: color-mix(in oklab, var(--panel-hex), black 14%);
  --message-hover-bg: color-mix(in oklab, var(--panel-hex), black 8%);
  --message-draft-bg: color-mix(in oklab, var(--panel-hex), black 18%);

  /* Swim-lane hue tuning (overridden per-theme). */
  --lane-light: 0.55;
  --lane-chroma: 0.14;
  --lane-border-light: 0.55;
  --lane-border-chroma: 0.14;
  --lane-bg-mix: 14%;
  --lane-bg-mix-end: 8%;
  --lane-header-mix: 24%;
  --lane-header-mix-end: 18%;
  --lane-text-mix: 50%;
  --lane-border-mix: 50%;
  --lane-glow: 0 0 0 transparent;
}

[data-theme="cypherCity"] {
  --lane-light: 0.45;
  --lane-chroma: 0.12;
  --lane-border-light: 0.78;
  --lane-border-chroma: 0.32;
  --lane-bg-mix: 6%;
  --lane-bg-mix-end: 3%;
  --lane-header-mix: 10%;
  --lane-header-mix-end: 6%;
  --lane-text-mix: 90%;
  --lane-border-mix: 95%;
  --lane-glow: 0 0 12px color-mix(in oklab, oklch(var(--lane-border-light) var(--lane-border-chroma) var(--lane-hue, 160)), transparent 60%);
}

[data-theme="bubble-tea"] .lane-bg,
[data-theme="bubble-tea"] .lane-header {
  background: #e3dacc !important;
  border-color: #c9b9a3 !important;
  color: #2A211B !important;
  box-shadow: none !important;
}

[data-theme="bubble-tea"] .lane-header {
  background: #d8ccb9 !important;
}

[data-theme="bubble-tea"] {
  --input-bg: #FCFAF6;
  --message-bg: #F7F3ED;
  --message-hover-bg: #FFFDF9;
  --message-draft-bg: #F2EBE1;
}

[data-theme="officeBlue"] {
  --input-bg: #FFFFFF;
  --message-bg: #FFFFFF;
  --message-hover-bg: #FFFFFF;
  --message-draft-bg: #F7FAFE;
}