/* ZulfiEra design tokens: the one source of colours and fonts for the chat app (after styles.css) and
   ZulfiEra Code (/code/). Clean cool white (light) and charcoal (dark), with the blue from the ZulfiEra logo as the
   one colour for actions, selection and highlights. IBM Plex Sans for reading, IBM Plex Mono for labels.
   Light, dark (Settings), and the device setting when none is chosen.
   Text colours meet WCAG AA on --bg, --side and --panel (--faint 5.1:1 or more; --tint 6:1 or more). */
:root {
  --bg: #F7F8FA; --panel: #FFFFFF; --side: #F1F3F6; --text: #111827; --muted: #4B5563; --faint: #5F6775;
  --border: #E3E6EB; --rule-strong: #CBD1D9;
  --accent: #1D4ED8; --accent-strong: #1E40AF; --accent-text: #FFFFFF;
  --accent-soft: rgba(17, 24, 39, 0.05); --hover: rgba(17, 24, 39, 0.05);
  --tint: #1D4ED8; --tint-soft: rgba(29, 78, 216, 0.08); --brand: #1D4ED8;
  --user-bubble: transparent; --code-bg: #0F172A;
  --shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sb-bg: #F1F3F6; --sb-text: #111827; --sb-muted: #4B5563; --sb-border: #E1E5EA; --sb-hover: rgba(17, 24, 39, 0.05);
  --sb-active: #FFFFFF; --sb-word: #111827; --sb-accent: #1D4ED8; --sb-btn: #FFFFFF; --sb-btn-border: #DCE1E7;
}
:root[data-theme="dark"] {
  --bg: #0F1115; --panel: #171A20; --side: #0C0E12; --text: #E8EAEE; --muted: #A3AAB6; --faint: #8D95A3;
  --border: #262A32; --rule-strong: #353A44;
  --accent: #6EA8FE; --accent-strong: #93BFFF; --accent-text: #0F1115;
  --accent-soft: rgba(232, 234, 238, 0.06); --hover: rgba(232, 234, 238, 0.06);
  --tint: #6EA8FE; --tint-soft: rgba(110, 168, 254, 0.14); --brand: #6EA8FE;
  --code-bg: #0A0C10; --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --sb-bg: #0C0E12; --sb-text: #E1E4E9; --sb-muted: #9AA1AD; --sb-border: #1F232A; --sb-hover: rgba(232, 234, 238, 0.05);
  --sb-active: #171A20; --sb-word: #E8EAEE; --sb-accent: #6EA8FE; --sb-btn: #171A20; --sb-btn-border: #262A32;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1115; --panel: #171A20; --side: #0C0E12; --text: #E8EAEE; --muted: #A3AAB6; --faint: #8D95A3;
    --border: #262A32; --rule-strong: #353A44;
    --accent: #6EA8FE; --accent-strong: #93BFFF; --accent-text: #0F1115;
    --accent-soft: rgba(232, 234, 238, 0.06); --hover: rgba(232, 234, 238, 0.06);
    --tint: #6EA8FE; --tint-soft: rgba(110, 168, 254, 0.14); --brand: #6EA8FE;
    --code-bg: #0A0C10; --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    --sb-bg: #0C0E12; --sb-text: #E1E4E9; --sb-muted: #9AA1AD; --sb-border: #1F232A; --sb-hover: rgba(232, 234, 238, 0.05);
    --sb-active: #171A20; --sb-word: #E8EAEE; --sb-accent: #6EA8FE; --sb-btn: #171A20; --sb-btn-border: #262A32;
  }
}