/* ==========================================================================
   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:-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,.04); --shadow-lg:0 12px 32px rgba(16,24,40,.08);
  /* 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,.08);
}

[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,.3); --shadow-lg:0 12px 32px rgba(0,0,0,.45);
  --ok:#4ADE9B; --ok-tint:#123326; --warn:#F5C451; --warn-tint:#3A2E10;
  --bad:#FF8A7A; --bad-tint:#3D1A17; --info:#7DB7F5; --info-tint:#11283F;
}