html[data-theme="light"] {
  --bg: #e7ecf3;
  --app: #ffffff;
  --header: #f5f7fb;
  --surface: #eef2f7;
  --input: #ffffff;
  --text: #1a2332;
  --muted: #5b6778;
  --faint: #8a95a5;
  --border: #d5dde8;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, .12);
  --bot-bg: #e8eef6;
  --bot-fg: #1a2332;
  --user-bg: #2563eb;
  --user-fg: #ffffff;
  --send: #16a34a;
  --send-hover: #15803d;
  --ok: #15803d;
  --bad: #dc2626;
  --shadow: 0 10px 30px rgba(24, 39, 75, .08);
  --font: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size: 15px;
  --line: 1.5;
  --chat-alpha: 94%;
}

html[data-theme="dark"] {
  --bg: #0f1923;
  --app: #161b22;
  --header: #21262d;
  --surface: #0d1117;
  --input: #21262d;
  --text: #e6edf3;
  --muted: #8b949e;
  --faint: #6e7681;
  --border: #30363d;
  --accent: #388bfd;
  --accent-soft: rgba(56, 139, 253, .16);
  --bot-bg: #21262d;
  --bot-fg: #e6edf3;
  --user-bg: #1f6feb;
  --user-fg: #ffffff;
  --send: #238636;
  --send-hover: #2ea043;
  --ok: #3fb950;
  --bad: #f85149;
  --shadow: 0 12px 32px rgba(0, 0, 0, .28);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size: 14.5px;
  --line: 1.5;
  --chat-alpha: 90%;
}

html[data-theme="blue"] {
  --bg: #071422;
  --app: #0d1d33;
  --header: #143056;
  --surface: #0a182c;
  --input: #16345c;
  --text: #eaf3ff;
  --muted: #8aa8c8;
  --faint: #6d89ab;
  --border: #234872;
  --accent: #5eb0ff;
  --accent-soft: rgba(94, 176, 255, .16);
  --bot-bg: #163252;
  --bot-fg: #eaf3ff;
  --user-bg: #1d6fd4;
  --user-fg: #ffffff;
  --send: #3b82f6;
  --send-hover: #60a5fa;
  --ok: #38bdf8;
  --bad: #fb7185;
  --shadow: 0 12px 32px rgba(4, 14, 28, .4);
  --font: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-size: 14.5px;
  --line: 1.52;
  --chat-alpha: 90%;
}

html[data-theme="green"] {
  --bg: #0b140e;
  --app: #121c16;
  --header: #1a2c20;
  --surface: #0e1812;
  --input: #1c3224;
  --text: #e8f6ec;
  --muted: #8fb89a;
  --faint: #6f9178;
  --border: #2a4634;
  --accent: #3ecf8e;
  --accent-soft: rgba(62, 207, 142, .16);
  --bot-bg: #1a2e22;
  --bot-fg: #e8f6ec;
  --user-bg: #1f9d55;
  --user-fg: #f4fff8;
  --send: #22a85a;
  --send-hover: #2fc36c;
  --ok: #4ade80;
  --bad: #fb7185;
  --shadow: 0 12px 32px rgba(4, 16, 8, .4);
  --font: Nunito, "Segoe UI", Verdana, sans-serif;
  --font-size: 15px;
  --line: 1.55;
  --chat-alpha: 90%;
}

html[data-theme="purple"] {
  --bg: #120c1c;
  --app: #1b1328;
  --header: #2a1f3d;
  --surface: #160f22;
  --input: #322448;
  --text: #f3ecff;
  --muted: #b09cc8;
  --faint: #8b789f;
  --border: #3d2e58;
  --accent: #c084fc;
  --accent-soft: rgba(192, 132, 252, .18);
  --bot-bg: #2a1f3d;
  --bot-fg: #f3ecff;
  --user-bg: #7c3aed;
  --user-fg: #faf5ff;
  --send: #8b5cf6;
  --send-hover: #a78bfa;
  --ok: #c4b5fd;
  --bad: #fb7185;
  --shadow: 0 12px 32px rgba(12, 6, 22, .42);
  --font: Outfit, "Trebuchet MS", "Segoe UI", sans-serif;
  --font-size: 15px;
  --line: 1.5;
  --chat-alpha: 90%;
}

html[data-theme="yellow"] {
  --bg: #f3ead0;
  --app: #fff8e8;
  --header: #f7efd4;
  --surface: #f4ead0;
  --input: #fffdf6;
  --text: #2c2408;
  --muted: #7a6a3a;
  --faint: #9a8852;
  --border: #e2d3a4;
  --accent: #b8860b;
  --accent-soft: rgba(184, 134, 11, .14);
  --bot-bg: #efe4c4;
  --bot-fg: #2c2408;
  --user-bg: #d4a017;
  --user-fg: #1a1400;
  --send: #c4920a;
  --send-hover: #a67c08;
  --ok: #6b8f2e;
  --bad: #b42318;
  --shadow: 0 10px 28px rgba(80, 60, 10, .1);
  --font: Literata, Georgia, "Palatino Linotype", "Times New Roman", serif;
  --font-size: 15.5px;
  --line: 1.58;
  --chat-alpha: 94%;
}

html[data-theme="light"],
html[data-theme="yellow"] { color-scheme: light; }
html[data-theme="dark"],
html[data-theme="blue"],
html[data-theme="green"],
html[data-theme="purple"] { color-scheme: dark; -webkit-font-smoothing: antialiased; }

html {
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line);
  color: var(--text);
  background: var(--bg);
}

body.has-bg {
  background-color: var(--bg);
  background-image: var(--site-bg);
}
body.bg-fixed {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
body.bg-stretch {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-attachment: scroll;
}
body.bg-tile {
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto;
  background-attachment: scroll;
}

body.has-chat-bg #messages,
body.has-chat-bg .chat-demo-msgs {
  background-image: var(--chat-bg);
  background-color: var(--app);
}
body.chat-bg-fixed #messages,
body.chat-bg-fixed .chat-demo-msgs {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
body.chat-bg-stretch #messages,
body.chat-bg-stretch .chat-demo-msgs {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-attachment: scroll;
}
body.chat-bg-tile #messages,
body.chat-bg-tile .chat-demo-msgs {
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto;
  background-attachment: scroll;
}