/*
 * Trackli colour tokens: the single source of truth for every colour in the app.
 *
 * Light values sit on :root, dark values on .dark (the app toggles "dark" on <html>).
 * Each colour is given twice: as hex (--name, for plain var() use) and as an
 * "r g b" triplet (--name-rgb), which tailwind.config.js uses so opacity
 * modifiers work (bg-accent/20). --overlay is rgba and has no triplet.
 *
 * Values come from the spec (docs/superpowers/specs/2026-10-29-app-redesign-design.md).
 * src/styles/tokens.js mirrors them as hex for JS and tokens.test.js keeps the two
 * in step, so change both together. Human reference: docs/design-system/tokens.md.
 */

:root {
  /* Native controls (checkboxes, scrollbars, date inputs) follow the app theme, not the OS */
  color-scheme: light;
  --bg: #F5F5F2;
  --bg-rgb: 245 245 242;
  --sidebar: #EDEDE9;
  --sidebar-rgb: 237 237 233;
  --surface: #FFFFFF;
  --surface-rgb: 255 255 255;
  --surface-2: #FAFAF8;
  --surface-2-rgb: 250 250 248;
  --surface-hover: #F3F3EF;
  --surface-hover-rgb: 243 243 239;
  --nav-active: #E3E3DE;
  --nav-active-rgb: 227 227 222;
  --border: #E2E2DD;
  --border-rgb: 226 226 221;
  --border-strong: #B9B9B3;
  --border-strong-rgb: 185 185 179;
  --text: #1C1D1F;
  --text-rgb: 28 29 31;
  --text-2: #3D3F43;
  --text-2-rgb: 61 63 67;
  --text-3: #5F6268;
  --text-3-rgb: 95 98 104;
  --accent: #0F766E;
  --accent-rgb: 15 118 110;
  --on-accent: #FFFFFF;
  --on-accent-rgb: 255 255 255;
  --on-overlay: #FFFFFF;
  --on-overlay-rgb: 255 255 255;
  --accent-soft: #E1F1EE;
  --accent-soft-rgb: 225 241 238;
  --accent-text: #0F5F59;
  --accent-text-rgb: 15 95 89;
  --accent-edge: #B9DDD7;
  --accent-edge-rgb: 185 221 215;
  --danger: #B42318;
  --danger-rgb: 180 35 24;
  --danger-soft: #FCEBE9;
  --danger-soft-rgb: 252 235 233;
  --warn: #B4530F;
  --warn-rgb: 180 83 15;
  --warn-soft: #FBF1E6;
  --warn-soft-rgb: 251 241 230;
  --jira: #1E4FC2;
  --jira-rgb: 30 79 194;
  --sun: #B7791F;
  --sun-rgb: 183 121 31;
  --overlay: rgba(28,29,31,0.32);

  /* Status colours (the logo's, softened). Blocked uses --warn. */
  --status-backlog: #D4B03A;
  --status-backlog-rgb: 212 176 58;
  --status-todo: #3AAFC4;
  --status-todo-rgb: 58 175 196;
  --status-in-progress: #D45F8C;
  --status-in-progress-rgb: 212 95 140;
  --status-done: #8CB13F;
  --status-done-rgb: 140 177 63;

  /* Depth: soft, neutral, never coloured. */
  --shadow-card: 0 1px 2px rgba(28,29,31,0.05);
  --shadow-modal: 0 30px 80px -24px rgba(28,29,31,0.35);
}

.dark {
  color-scheme: dark;
  --bg: #1C1D20;
  --bg-rgb: 28 29 32;
  --sidebar: #18191B;
  --sidebar-rgb: 24 25 27;
  --surface: #25262A;
  --surface-rgb: 37 38 42;
  --surface-2: #202124;
  --surface-2-rgb: 32 33 36;
  --surface-hover: #2E2F34;
  --surface-hover-rgb: 46 47 52;
  --nav-active: #2A2B30;
  --nav-active-rgb: 42 43 48;
  --border: #33353A;
  --border-rgb: 51 53 58;
  --border-strong: #55575D;
  --border-strong-rgb: 85 87 93;
  --text: #ECECEE;
  --text-rgb: 236 236 238;
  --text-2: #C8C9CD;
  --text-2-rgb: 200 201 205;
  --text-3: #A0A2A8;
  --text-3-rgb: 160 162 168;
  --accent: #2BB3A3;
  --accent-rgb: 43 179 163;
  --on-accent: #0E1F1D;
  --on-accent-rgb: 14 31 29;
  --on-overlay: #FFFFFF;
  --on-overlay-rgb: 255 255 255;
  --accent-soft: #1D3532;
  --accent-soft-rgb: 29 53 50;
  --accent-text: #7CDCCF;
  --accent-text-rgb: 124 220 207;
  --accent-edge: #2B5A54;
  --accent-edge-rgb: 43 90 84;
  --danger: #F28B82;
  --danger-rgb: 242 139 130;
  --danger-soft: #3A2423;
  --danger-soft-rgb: 58 36 35;
  --warn: #F2A65A;
  --warn-rgb: 242 166 90;
  --warn-soft: #33281D;
  --warn-soft-rgb: 51 40 29;
  --jira: #8AB4F8;
  --jira-rgb: 138 180 248;
  --sun: #E8B04B;
  --sun-rgb: 232 176 75;
  --overlay: rgba(0,0,0,0.55);

  /* Status colours (the logo's, softened). Blocked uses --warn. */
  --status-backlog: #C9A93A;
  --status-backlog-rgb: 201 169 58;
  --status-todo: #3DB3C9;
  --status-todo-rgb: 61 179 201;
  --status-in-progress: #D2668F;
  --status-in-progress-rgb: 210 102 143;
  --status-done: #8DB04A;
  --status-done-rgb: 141 176 74;

  /* Depth: soft, neutral, never coloured. */
  --shadow-card: none;
  --shadow-modal: 0 30px 80px -20px rgba(0,0,0,0.7);
}