/* PROXWEB - theme palettes.
 *
 * ONE source of truth for colour, shared by all four surfaces:
 *   electron/launcher.html   (file://, linked as ../public/themes.css)
 *   public/lobby.html        (served by the hub at /themes.css)
 *   public/index.html        (served by the hub at /themes.css)
 *   the passcode gate inlined in electron/gateway/hub.js
 *
 * A theme sets only the ~15 BASE tokens in its own [data-theme="..."] block.
 * Everything else is derived once, below, with color-mix() - so a new theme is
 * one small block and never has to hand-pick a hover border or a banner tint.
 *
 * Derived tokens mix against --bg and --text, which are always opposed, so the
 * same formula lands correctly in both dark and light themes (e.g. a "deepened"
 * danger button darkens on a dark theme and lightens on a light one).
 *
 * Requires color-mix(): Chrome/Edge 111+, Safari 16.2+, Firefox 113+.
 */

/* ---------------------------------------------------------------- derived -- */
:root {
  --border-soft:   color-mix(in srgb, var(--border) 55%, var(--bg));
  --border-hover:  color-mix(in srgb, var(--border) 62%, var(--text));
  /* 82%, not less: below that this drops under 3:1 on the light themes. */
  --text-faint:    color-mix(in srgb, var(--text-dim) 82%, var(--bg));

  --accent-soft:   color-mix(in srgb, var(--accent) 74%, var(--text));
  --accent-hover:  color-mix(in srgb, var(--accent) 86%, var(--text));
  --accent-ring:   color-mix(in srgb, var(--accent) 22%, transparent);

  --ok-ring:       color-mix(in srgb, var(--ok) 20%, transparent);
  --ok-text:       color-mix(in srgb, var(--ok) 66%, var(--text));

  /* Label on a solid danger button. --bg is the right answer in almost every
   * theme (a dark ground under a bright red, a light one under a deep red); the
   * four themes where that lands under 4.5:1 override it in their own block. */
  --on-danger:     var(--bg);
  --danger-bg:     color-mix(in srgb, var(--danger) 18%, var(--bg));
  --danger-bd:     color-mix(in srgb, var(--danger) 48%, var(--bg));
  --danger-text:   color-mix(in srgb, var(--danger) 64%, var(--text));

  --warn-bd:       color-mix(in srgb, var(--warn) 42%, var(--bg));

  --info-bg:       color-mix(in srgb, var(--info) 16%, var(--bg));
  --info-bd:       color-mix(in srgb, var(--info) 44%, var(--bg));
  --info-text:     color-mix(in srgb, var(--info) 62%, var(--text));

  --tab-active-bg: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --tab-active-bd: color-mix(in srgb, var(--accent) 55%, var(--surface));

  --panel-bg:      color-mix(in srgb, var(--surface) 93%, transparent);
  --chat-bg:       color-mix(in srgb, var(--surface) 95%, transparent);
  /* Saturated on purpose: these mark WHO is speaking, so they must read as a
   * colour rather than as slightly-tinted body text. */
  --chat-who:      var(--info);
  --chat-mine:     var(--ok);
  --scroll-thumb:  color-mix(in srgb, var(--border) 80%, var(--text));
  --shadow:        color-mix(in srgb, #000 55%, transparent);
}

/* ------------------------------------------------------------ base tokens --
 * :root carries "midnight" so an unstamped page still looks right, and the
 * explicit [data-theme="midnight"] block lets the picker select back to it.
 * Theme blocks must stay AFTER :root - equal specificity, source order wins.
 */
:root,
[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #070b14; --surface: #121a2e; --surface-2: #0e1626; --raised: #1b2438;
  --sunken: #0b1220; --border: #34415e; --text: #eaf0ff; --text-dim: #9aa7c7;
  --accent: #335cff; --on-accent: #ffffff; --info: #9ad0ff; --ok: #37d67a;
  --warn: #f0b429; --danger: #e0526a; --canvas: #02040a;
}

/* ================================================================== DARK == */

[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #0e0f12; --surface: #17191f; --surface-2: #131519; --raised: #1e2128;
  --sunken: #0b0c0f; --border: #2f3440; --text: #e6e8ee; --text-dim: #949aa8;
  --accent: #14b8a6; --on-accent: #04201c; --info: #7dd3fc; --ok: #4ade80;
  --warn: #fbbf24; --danger: #f05252; --canvas: #060709;
}

[data-theme="ember"] {
  color-scheme: dark;
  --bg: #12100e; --surface: #1c1917; --surface-2: #171412; --raised: #262220;
  --sunken: #0d0b0a; --border: #3a3430; --text: #f0ebe4; --text-dim: #a89f94;
  --accent: #f59e0b; --on-accent: #241703; --info: #5eccc0; --ok: #86c34a;
  --warn: #fbbf24; --danger: #e0574b; --canvas: #0a0908;
}

[data-theme="violet"] {
  color-scheme: dark;
  --bg: #0c0a14; --surface: #171327; --surface-2: #120f1f; --raised: #211b38;
  --sunken: #0a0811; --border: #372c58; --text: #ece8ff; --text-dim: #a096c4;
  --accent: #c026d3; --on-accent: #ffffff; --info: #a78bfa; --ok: #34d399;
  --warn: #f0b429; --danger: #f43f5e; --canvas: #06040c;
}

[data-theme="forest"] {
  color-scheme: dark;
  --bg: #08120c; --surface: #0f1e15; --surface-2: #0c1810; --raised: #16291c;
  --sunken: #060f09; --border: #244430; --text: #e4f2e8; --text-dim: #93b3a0;
  --accent: #22c55e; --on-accent: #04210f; --info: #7dd3fc; --ok: #a3e635;
  --warn: #fbbf24; --danger: #ef5350; --canvas: #040b06;
}

[data-theme="crimson"] {
  color-scheme: dark;
  --bg: #100a0b; --surface: #1a1113; --surface-2: #150d0f; --raised: #241719;
  --sunken: #0b0708; --border: #3c2529; --text: #f5e9ea; --text-dim: #b0969a;
  --accent: #e11d48; --on-accent: #ffffff; --info: #93b8e8; --ok: #4ade80;
  --warn: #f0b429; --danger: #ff6b6b; --canvas: #080505;
}

[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #061319; --surface: #0c2029; --surface-2: #091a22; --raised: #123040;
  --sunken: #040e13; --border: #1e4457; --text: #e0f2f8; --text-dim: #8bb0c0;
  --accent: #06b6d4; --on-accent: #022630; --info: #7dd3fc; --ok: #34d399;
  --warn: #fbbf24; --danger: #f05252; --canvas: #030a0e;
}

[data-theme="nord"] {
  color-scheme: dark;
  --bg: #2e3440; --surface: #3b4252; --surface-2: #353c4a; --raised: #434c5e;
  --sunken: #272c36; --border: #4c566a; --text: #eceff4; --text-dim: #a9b2c3;
  --accent: #88c0d0; --on-accent: #2e3440; --info: #81a1c1; --ok: #a3be8c;
  --warn: #ebcb8b; --danger: #bf616a; --canvas: #242933; --on-danger: #11141b;
  --chat-who: #8fbcbb;
}

[data-theme="dracula"] {
  color-scheme: dark;
  --bg: #282a36; --surface: #343746; --surface-2: #2e303e; --raised: #3d4155;
  --sunken: #21222c; --border: #4a4e63; --text: #f8f8f2; --text-dim: #a7abbe;
  --accent: #bd93f9; --on-accent: #21222c; --info: #8be9fd; --ok: #50fa7b;
  --warn: #f1fa8c; --danger: #ff5555; --canvas: #1e1f29;
}

[data-theme="catppuccin"] {
  color-scheme: dark;
  --bg: #1e1e2e; --surface: #313244; --surface-2: #272739; --raised: #45475a;
  --sunken: #181825; --border: #585b70; --text: #cdd6f4; --text-dim: #a6adc8;
  --accent: #cba6f7; --on-accent: #1e1e2e; --info: #89dceb; --ok: #a6e3a1;
  --warn: #f9e2af; --danger: #f38ba8; --canvas: #11111b;
}

[data-theme="tokyo-night"] {
  color-scheme: dark;
  --bg: #1a1b26; --surface: #24283b; --surface-2: #1f2335; --raised: #2f344a;
  --sunken: #16161e; --border: #3b4261; --text: #c0caf5; --text-dim: #8a92b2;
  --accent: #7aa2f7; --on-accent: #16161e; --info: #7dcfff; --ok: #9ece6a;
  --warn: #e0af68; --danger: #f7768e; --canvas: #131420;
}

[data-theme="gruvbox"] {
  color-scheme: dark;
  --bg: #1d2021; --surface: #282828; --surface-2: #232526; --raised: #3c3836;
  --sunken: #171819; --border: #504945; --text: #ebdbb2; --text-dim: #a89984;
  --accent: #fabd2f; --on-accent: #1d2021; --info: #83a598; --ok: #b8bb26;
  --warn: #fe8019; --danger: #fb4934; --canvas: #141617;
}

[data-theme="solarized"] {
  color-scheme: dark;
  --bg: #002b36; --surface: #073642; --surface-2: #04303b; --raised: #0a4653;
  --sunken: #00212b; --border: #17545f; --text: #eee8d5; --text-dim: #93a1a1;
  --accent: #268bd2; --on-accent: #00212b; --info: #2aa198; --ok: #859900;
  --warn: #b58900; --danger: #dc322f; --canvas: #001e26; --on-danger: #ffffff;
  --chat-who: #34bdb2; --chat-mine: #9cb300;
}

[data-theme="rose"] {
  color-scheme: dark;
  --bg: #191724; --surface: #1f1d2e; --surface-2: #1b1928; --raised: #26233a;
  --sunken: #14121f; --border: #403d52; --text: #e0def4; --text-dim: #908caa;
  --accent: #ebbcba; --on-accent: #191724; --info: #9ccfd8; --ok: #79b8a0;
  --warn: #f6c177; --danger: #eb6f92; --canvas: #100f1c;
}

[data-theme="matrix"] {
  color-scheme: dark;
  --bg: #000000; --surface: #071008; --surface-2: #050c06; --raised: #0b1a0d;
  --sunken: #030703; --border: #16451f; --text: #c8ffd0; --text-dim: #5fa86c;
  --accent: #00ff66; --on-accent: #00160a; --info: #66ffb2; --ok: #a8ff60;
  --warn: #ffd24a; --danger: #ff4747; --canvas: #000000;
}

[data-theme="mono"] {
  color-scheme: dark;
  --bg: #0a0a0a; --surface: #161616; --surface-2: #111111; --raised: #202020;
  --sunken: #070707; --border: #333333; --text: #f2f2f2; --text-dim: #9c9c9c;
  --accent: #f2f2f2; --on-accent: #0a0a0a; --info: #cfcfcf; --ok: #b8b8b8;
  --warn: #c9c9c9; --danger: #ff7a7a; --canvas: #000000;
}

/* Maximum-contrast option, for a dim room or a bad projector. */
[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0a0a0a; --surface-2: #050505; --raised: #141414;
  --sunken: #000000; --border: #7a7a7a; --text: #ffffff; --text-dim: #d0d0d0;
  --accent: #ffff00; --on-accent: #000000; --info: #00e5ff; --ok: #00ff85;
  --warn: #ffb300; --danger: #ff5252; --canvas: #000000;
}

/* ================================================================= LIGHT ==
 * --canvas stays dark in every light theme: the room's video canvas is
 * letterboxed, and a white surround around a bright page is glare, not contrast.
 */

[data-theme="daylight"] {
  color-scheme: light;
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f7f8fb; --raised: #eef0f5;
  --sunken: #ffffff; --border: #d5dae3; --text: #161820; --text-dim: #5b6373;
  --accent: #4f46e5; --on-accent: #ffffff; --info: #0369a1; --ok: #15803d;
  --warn: #b45309; --danger: #dc2626; --canvas: #0d0f14; --on-danger: #ffffff;
}

[data-theme="paper"] {
  color-scheme: light;
  --bg: #f4efe4; --surface: #fffcf5; --surface-2: #f8f3e8; --raised: #ece4d4;
  --sunken: #fffdf8; --border: #ddd2bd; --text: #2a241b; --text-dim: #6b6152;
  --accent: #a1662f; --on-accent: #fffcf5; --info: #2b6b7a; --ok: #4a7c2f;
  --warn: #b06a00; --danger: #b23025; --canvas: #171410;
}

[data-theme="mint"] {
  color-scheme: light;
  --bg: #f2f7f4; --surface: #ffffff; --surface-2: #ebf3ee; --raised: #e3eee8;
  --sunken: #ffffff; --border: #cfe0d6; --text: #12201a; --text-dim: #52685d;
  --accent: #0f9d58; --on-accent: #0b1410; --info: #0b7285; --ok: #2b8a3e;
  --warn: #b06a00; --danger: #c92a2a; --canvas: #0b1410; --chat-mine: #237032;
}

[data-theme="solarized-light"] {
  color-scheme: light;
  --bg: #fdf6e3; --surface: #eee8d5; --surface-2: #f5eeda; --raised: #e4ddc8;
  --sunken: #fffdf6; --border: #d3cbb7; --text: #073642; --text-dim: #586e75;
  --accent: #268bd2; --on-accent: #00212b; --info: #2aa198; --ok: #859900;
  --warn: #ab8000; --danger: #dc322f; --canvas: #002b36; --on-danger: #ffffff;
  --chat-who: #18597f; --chat-mine: #556200;
}

[data-theme="gruvbox-light"] {
  color-scheme: light;
  --bg: #fbf1c7; --surface: #f2e5bc; --surface-2: #f6ead0; --raised: #ebdbb2;
  --sunken: #fffbef; --border: #d5c4a1; --text: #3c3836; --text-dim: #665c54;
  --accent: #af3a03; --on-accent: #fbf1c7; --info: #427b58; --ok: #79740e;
  --warn: #b57614; --danger: #9d0006; --canvas: #282828;
  --chat-who: #2f5a40; --chat-mine: #5f5c0b;
}