/* ==========================================================================
   THEME FILE - the ONLY place colours and shapes live.
   style.css never contains a colour; it only reads these variables.

   To add a theme:  1) copy any block below  2) change the data-theme name
                    3) edit the values      4) add { id, name } to THEMES in theme.js
   To change the default theme: change DEFAULT in theme.js.
   The "Custom" theme is not in this file: theme.js builds it from the 5 colours the user picks (see DEFCUSTOM).
   ========================================================================== */

:root,
[data-theme="orange"] {
  /* shape + type */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 8px;
  --r-pill: 999px;
  /* surfaces */
  --bg: #f5f3ef;
  --card: #ffffff;
  --ink: #1f2933;
  --mute: #7a7367;
  --label: #4a5360;
  --line: #e4dfd6;
  --line-soft: #efebe3;
  --input-line: #d5cec0;
  --btn-line: #cfc8bc;
  --soft: #ece7de;
  --soft-ink: #5b6470;
  --chip-bg: #f1ede5;
  --head-bg: #f7f4ee;
  --hover: #fcfaf6;
  /* header */
  --nav-bg: #1b2430;
  --nav-ink: #d7dde6;
  --nav-ink-strong: #ffffff;
  --tag-bg: #11161d;
  --tag-ink: #9aa5b1;
  --tag-link: #f7b27f;
  /* brand accent */
  --accent: #f26b1d;
  --accent-hover: #d9570f;
  --accent-tint: #fff2e8;
  --accent-ink: #ffffff;
  --accent-rgb: 242, 107, 29;
  --strong-bg: #1b2430;
  --strong-ink: #ffffff;
  --mark: var(--accent); /* logo square */
  /* placeholders + skeleton + chat */
  --ph1: #efeae1;
  --ph2: #e3ddd0;
  --ph-line: #d2cabb;
  --ph-ink: #a39b8d;
  --bar1: #ece7de;
  --bar2: #f6f2eb;
  --chat-bg: #fbf9f5;
  --badge-bg: #eef1f5;
  --badge-ink: #475467;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 20px 44px -14px rgba(16, 24, 40, 0.22);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.1), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --shadow-hover: var(--shadow-md);
  /* status colours */
  --ok: #1e8e5a;
  --ok-tint: #e3f5ec;
  --warn: #b7791f;
  --warn-tint: #fdf3dc;
  --bad: #c0392b;
  --bad-tint: #fbe7e4;
  --info: #2b6cb0;
  --info-tint: #e6f0fb;
}

[data-theme="blue"] {
  --bg: #f2f5f9;
  --card: #ffffff;
  --ink: #16263a;
  --mute: #6b7a90;
  --label: #44546a;
  --line: #dde4ee;
  --line-soft: #e8edf4;
  --input-line: #c9d5e4;
  --btn-line: #c2cedd;
  --soft: #e4eaf2;
  --soft-ink: #53647c;
  --chip-bg: #e9eef5;
  --head-bg: #f3f6fa;
  --hover: #f7f9fc;
  --nav-bg: #0f2a47;
  --nav-ink: #c9d8ea;
  --nav-ink-strong: #ffffff;
  --tag-bg: #0a1b2f;
  --tag-ink: #8fa6c0;
  --tag-link: #9cc4f5;
  --accent: #1d6fd8;
  --accent-hover: #1559b0;
  --accent-tint: #e8f1fd;
  --accent-ink: #ffffff;
  --accent-rgb: 29, 111, 216;
  --strong-bg: #0f2a47;
  --strong-ink: #ffffff;
  --ph1: #e6ecf4;
  --ph2: #d9e2ee;
  --ph-line: #c9d5e4;
  --ph-ink: #8497b0;
  --bar1: #e4eaf2;
  --bar2: #f2f5f9;
  --chat-bg: #f7f9fc;
  --badge-bg: #e9eef5;
  --badge-ink: #475a75;
}

[data-theme="green"] {
  --bg: #f2f6f3;
  --card: #ffffff;
  --ink: #1b2b23;
  --mute: #6c7f74;
  --label: #42564a;
  --line: #dce6df;
  --line-soft: #e7eee9;
  --input-line: #c8d6cc;
  --btn-line: #c2d0c7;
  --soft: #e2ebe5;
  --soft-ink: #506358;
  --chip-bg: #e8f0ea;
  --head-bg: #f3f8f4;
  --hover: #f7faf8;
  --nav-bg: #12332a;
  --nav-ink: #c6dacf;
  --nav-ink-strong: #ffffff;
  --tag-bg: #0a1f19;
  --tag-ink: #8da89b;
  --tag-link: #8fd9b1;
  --accent: #2e8b57;
  --accent-hover: #237045;
  --accent-tint: #e6f4ec;
  --accent-ink: #ffffff;
  --accent-rgb: 46, 139, 87;
  --strong-bg: #12332a;
  --strong-ink: #ffffff;
  --ph1: #e6eee8;
  --ph2: #d9e4dc;
  --ph-line: #c8d6cc;
  --ph-ink: #85988c;
  --bar1: #e2ebe5;
  --bar2: #f2f6f3;
  --chat-bg: #f7faf8;
  --badge-bg: #e8f0ea;
  --badge-ink: #4b6054;
}

/* sharp corners + neutral colour: shows that a theme can change SHAPE too */
[data-theme="slate"] {
  --r: 6px;
  --r-sm: 4px;
  --r-xs: 3px;
  --r-pill: 4px;
  --bg: #f4f4f5;
  --card: #ffffff;
  --ink: #18181b;
  --mute: #71717a;
  --label: #3f3f46;
  --line: #e4e4e7;
  --line-soft: #eeeef0;
  --input-line: #d4d4d8;
  --btn-line: #d4d4d8;
  --soft: #e7e7ea;
  --soft-ink: #52525b;
  --chip-bg: #ececef;
  --head-bg: #f7f7f8;
  --hover: #fafafa;
  --nav-bg: #18181b;
  --nav-ink: #d4d4d8;
  --nav-ink-strong: #ffffff;
  --tag-bg: #09090b;
  --tag-ink: #a1a1aa;
  --tag-link: #d4d4d8;
  --accent: #27272a;
  --accent-hover: #000000;
  --accent-tint: #eeeef0;
  --accent-ink: #ffffff;
  --accent-rgb: 39, 39, 42;
  --strong-bg: #27272a;
  --strong-ink: #ffffff;
  --ph1: #ececef;
  --ph2: #e1e1e5;
  --ph-line: #cfcfd4;
  --ph-ink: #8e8e96;
  --bar1: #e7e7ea;
  --bar2: #f4f4f5;
  --chat-bg: #fafafa;
  --badge-bg: #ececef;
  --badge-ink: #52525b;
  --mark: #fafafa;
  --shadow: none;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-hover: var(--shadow-md);
}

[data-theme="dark"] {
  --bg: #0e131a;
  --card: #17202b;
  --ink: #e7ecf2;
  --mute: #8d99a8;
  --label: #b4bfcc;
  --line: #263241;
  --line-soft: #1f2a37;
  --input-line: #34435a;
  --btn-line: #3a4a60;
  --soft: #1f2937;
  --soft-ink: #a9b4c2;
  --chip-bg: #1f2937;
  --head-bg: #1b2532;
  --hover: #1b2532;
  --nav-bg: #0a0e14;
  --nav-ink: #aab6c5;
  --nav-ink-strong: #ffffff;
  --tag-bg: #05080c;
  --tag-ink: #6f7c8d;
  --tag-link: #ff9a5c;
  --accent: #ff7a2f;
  --accent-hover: #e8661c;
  --accent-tint: #33200f;
  --accent-ink: #0e131a;
  --accent-rgb: 255, 122, 47;
  --strong-bg: #2b3a50;
  --strong-ink: #ffffff;
  --ph1: #1e2733;
  --ph2: #19212c;
  --ph-line: #2e3a4a;
  --ph-ink: #6f7c8d;
  --bar1: #1f2937;
  --bar2: #2a3646;
  --chat-bg: #121922;
  --badge-bg: #1f2937;
  --badge-ink: #a9b4c2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-hover: var(--shadow-md);
  --ok: #4ade9b;
  --ok-tint: #123326;
  --warn: #f5c451;
  --warn-tint: #3a2e10;
  --bad: #ff8a7a;
  --bad-tint: #3d1a17;
  --info: #7db7f5;
  --info-tint: #11283f;
}