/* Джура · токени тем (DESIGN_V2.md): спільні для застосунку і CRM штабу (staff/). Графіт — :root, Папір — html[data-mode="light"]. */
:root {
  --bg: #0b0b0c; --bg-2: #121214; --card: #17171a; --card-2: #1f1f23; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12);
  --edge: rgba(255,255,255,.07); --shadow: 0 0 #0000; --scrim: rgba(0,0,0,.55);
  --text: #f4f4f5; --text-2: rgba(244,244,245,.68); --text-3: rgba(244,244,245,.5);
  --accent: #c8f55a; --accent-fg: #c8f55a; --accent-ink: #0b0b0c; --accent-dim: rgba(200,245,90,.14); --accent-press: #d7fb7c;
  --warn: #ff6b5b; --warn-bg: rgba(255,107,91,.14);
  --font: 'Inter Tight', -apple-system, system-ui, sans-serif; --ease: cubic-bezier(.32,.72,0,1);
  --r: 18px; --r-lg: 26px; --safe-b: env(safe-area-inset-bottom); --safe-t: env(safe-area-inset-top);
  --bar: rgba(11,11,12,.78); --tabbar: rgba(28,28,32,.86); color-scheme: dark;
  /* сумісність зі старими назвами */
  --tint: var(--accent); --muted: var(--text-2); --muted-2: var(--text-3); --fill: rgba(255,255,255,.08); --pill: var(--card-2); --head: var(--bg); --press: rgba(255,255,255,.06);
}
html[data-mode="light"] {
  --bg: #f2f0e9; --bg-2: #ebe8df; --card: #fbfaf6; --card-2: #e7e4da; --line: rgba(26,25,22,.08); --line-2: rgba(26,25,22,.15);
  --edge: rgba(26,25,22,.07); --shadow: 0 1px 2px rgba(26,25,22,.05), 0 10px 30px rgba(26,25,22,.06); --scrim: rgba(26,25,22,.32);
  --text: #1a1916; --text-2: rgba(26,25,22,.76); --text-3: rgba(26,25,22,.6);
  /* акцент Паперу — помаранчевий «Опори» (#FD890A, власник 23.10.2026); як текст — темніший, AA на папері і на підсвітці */
  --accent: #fd890a; --accent-fg: #954a00; --accent-ink: #1a1916; --accent-dim: rgba(253,137,10,.14); --accent-press: #ec7d06;
  --warn: #a3301e; --warn-bg: rgba(163,48,30,.09);
  --bar: rgba(242,240,233,.82); --tabbar: rgba(251,250,246,.9); color-scheme: light;
  --fill: rgba(26,25,22,.06); --press: rgba(26,25,22,.05);
}

/* кольори етапів, станів і міток: класи x-c-<key> на .pill/.chip (і плитках «Сьогодні»); текст AA на своєму тлі в обох темах */
:root {
  --x-grey: #b8b8be; --x-grey-bg: rgba(184,184,190,.09); --x-blue: #8cb6ff; --x-blue-bg: rgba(140,182,255,.15);
  --x-olive: #c9d86a; --x-olive-bg: rgba(201,216,106,.14); --x-green: #62d690; --x-green-bg: rgba(98,214,144,.14);
  --x-rose: #e8968d; --x-rose-bg: rgba(232,150,141,.13); --x-sage: #a3c9ae; --x-sage-bg: rgba(163,201,174,.13);
  --x-red: #ff7b6c; --x-red-bg: rgba(255,123,108,.16); --x-amber: #f2b75a; --x-amber-bg: rgba(242,183,90,.15);
  --x-violet: #ada8ff; --x-violet-bg: rgba(173,168,255,.15);
}
html[data-mode="light"] {
  --x-grey: #57554e; --x-grey-bg: rgba(87,85,78,.08); --x-blue: #1f4f9c; --x-blue-bg: rgba(31,79,156,.10);
  --x-olive: #4b5700; --x-olive-bg: rgba(75,87,0,.12); --x-green: #11633a; --x-green-bg: rgba(17,99,58,.11);
  --x-rose: #923c36; --x-rose-bg: rgba(146,60,54,.10); --x-sage: #335c45; --x-sage-bg: rgba(51,92,69,.11);
  --x-red: #a8281a; --x-red-bg: rgba(168,40,26,.10); --x-amber: #784800; --x-amber-bg: rgba(120,72,0,.14);
  --x-violet: #4a3fae; --x-violet-bg: rgba(74,63,174,.10);
}
.x-c-potential, .x-c-nostep { --c: var(--x-grey); --cb: var(--x-grey-bg); }
.x-c-talked, .x-c-theirs { --c: var(--x-blue); --cb: var(--x-blue-bg); }
.x-c-process { --c: var(--x-olive); --cb: var(--x-olive-bg); }
.x-c-done { --c: var(--x-green); --cb: var(--x-green-bg); }
.x-c-failed { --c: var(--x-rose); --cb: var(--x-rose-bg); }
.x-c-serve { --c: var(--x-sage); --cb: var(--x-sage-bg); }
.x-c-szch { --c: var(--x-red); --cb: var(--x-red-bg); }
.x-c-tck, .x-c-stale { --c: var(--x-amber); --cb: var(--x-amber-bg); }
.x-c-bzvp { --c: var(--x-violet); --cb: var(--x-violet-bg); }
.x-c-wait { --c: var(--accent-ink); --cb: var(--accent); --cd: var(--accent-fg); } /* «Очікує дії» суцільним акцентом, як плитка; --cd — колір крапки і контуру */
.pill[class*="x-c-"], .chip[class*="x-c-"] { background: var(--cb); color: var(--c); }
.chip.on[class*="x-c-"] { background: var(--cd, var(--c)); color: var(--bg); }
.pill.x-old[class*="x-c-"] { background: none; box-shadow: inset 0 0 0 1px var(--cd, var(--c)); color: var(--cd, var(--c)); } /* стан давно не перевіряли */