/* БорМебель CRM — токены темы.
   Светлая тема (по умолчанию) — по референсу: тёмно-зелёная рамка и меню, светлая рабочая панель,
   зелёный акцент, чёрно-зелёные KPI-плашки. Тёмная — та же структура на почти чёрном зелёном.
   Новые цвета в компонентах — только через эти токены. Цвет из данных (стадия, человек) — через --c. */

:root{
  color-scheme:light;
  --font:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* рамка приложения и боковое меню */
  --frame-1:#060907; --frame-2:#040605; --frame-glow:rgba(61,220,107,.20);
  --side-fg:#e8f0ea; --side-muted:#8ea596; --side-dim:#5f7867;
  --side-hover:rgba(255,255,255,.06); --side-active:rgba(255,255,255,.11); --side-line:rgba(255,255,255,.08);
  --side-field:rgba(255,255,255,.06);

  /* рабочая область */
  --bg:#f3f6f2; --bg2:#e9efe8; --card:#ffffff; --card-h:#f8faf7; --field:#eef2ed; --field-h:#e6ece5;
  --pop:#ffffff; --drawer:#ffffff; --tip:#0d1a12; --tip-fg:#eaf3ec;
  --line:rgba(16,42,24,.09); --line2:rgba(16,42,24,.17); --line-row:rgba(16,42,24,.06);
  --text:#0f1b13; --muted:#5b6a60; --dim:#8a978e;
  --ov:16,42,24;                         /* rgba(var(--ov),a) — нейтральные подложки */

  --accent:#1f9d45; --accent-strong:#16803a; --accent-soft:#e1f2e4; --accent-soft2:#cfe9d5; --accent-fg:#15632d;
  --acc:31,157,69; --on-accent:#ffffff;

  /* чёрно-зелёная KPI-плашка */
  --ink:#0d1a12; --ink-2:#14271b; --ink-fg:#eaf3ec; --ink-muted:#8ea596; --ink-accent:#3ddc6b; --ink-bar:rgba(234,243,236,.18);

  /* семантика */
  --red:#d6393f;    --red-soft:#fde7e7;    --red-fg:#b42a30;
  --amber:#c27a00;  --amber-soft:#fdeccb;  --amber-fg:#8a5300;
  --blue:#2f6fd6;   --blue-soft:#e3ecfb;   --blue-fg:#2459ad;
  --violet:#7a4fd6; --violet-soft:#eee7fb; --violet-fg:#5f37b3;
  --teal:#0f8a74;   --teal-soft:#dcf3ee;   --teal-fg:#0b6b5a;
  --gray-soft:#edf0ec; --gray-fg:#56645a;

  /* палитра стадий и людей (данные) */
  --p1:#22a447; --p2:#2f6fd6; --p3:#0f8a74; --p4:#c27a00; --p5:#7a4fd6; --p6:#d6393f; --p7:#d0508c; --p8:#5b6a60;

  --shadow-card:0 1px 2px rgba(16,42,24,.06),0 4px 14px rgba(16,42,24,.05);
  --shadow-pop:0 16px 44px rgba(16,42,24,.18),0 2px 6px rgba(16,42,24,.08);
  --shadow-drawer:-18px 0 48px rgba(16,42,24,.16);
  --shadow-panel:0 0 0 1px rgba(255,255,255,.04),0 30px 80px rgba(0,0,0,.35);
  --scrim:rgba(8,22,13,.32);
  --deepen:30%;                          /* затемнение цвета из данных для текста на светлом */
  --tint:13%;                            /* заливка плашки цветом из данных */
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --frame-1:#040605; --frame-2:#020303; --frame-glow:rgba(61,220,107,.13);
  --side-fg:#e3ece5; --side-muted:#839a8a; --side-dim:#55695b;
  --side-hover:rgba(255,255,255,.05); --side-active:rgba(255,255,255,.09); --side-line:rgba(255,255,255,.07);
  --side-field:rgba(255,255,255,.05);

  --bg:#09110c; --bg2:#0d1711; --card:#111c15; --card-h:#15231a; --field:#0d1711; --field-h:#132019;
  --pop:#14211a; --drawer:#0f1913; --tip:#e7efe9; --tip-fg:#0d1a12;
  --line:rgba(214,255,226,.07); --line2:rgba(214,255,226,.14); --line-row:rgba(214,255,226,.05);
  --text:#e6eee8; --muted:#94a59a; --dim:#64766a;
  --ov:214,255,226;

  --accent:#3ddc6b; --accent-strong:#5fe685; --accent-soft:rgba(61,220,107,.13); --accent-soft2:rgba(61,220,107,.22); --accent-fg:#7ee9a0;
  --acc:61,220,107; --on-accent:#04200e;

  --ink:#0f2418; --ink-2:#163222; --ink-fg:#eaf3ec; --ink-muted:#8ea596; --ink-accent:#3ddc6b; --ink-bar:rgba(234,243,236,.16);

  --red:#ff5d63;    --red-soft:rgba(255,93,99,.14);   --red-fg:#ff8a8e;
  --amber:#ffc35a;  --amber-soft:rgba(255,195,90,.14); --amber-fg:#ffd27f;
  --blue:#64a0ff;   --blue-soft:rgba(100,160,255,.14); --blue-fg:#9cc2ff;
  --violet:#a985ff; --violet-soft:rgba(169,133,255,.15); --violet-fg:#c6adff;
  --teal:#3ad6b8;   --teal-soft:rgba(58,214,184,.13);  --teal-fg:#7ae6d1;
  --gray-soft:rgba(214,255,226,.07); --gray-fg:#a3b3a8;

  --p1:#3ddc6b; --p2:#64a0ff; --p3:#3ad6b8; --p4:#ffc35a; --p5:#a985ff; --p6:#ff5d63; --p7:#ff7cb6; --p8:#94a59a;

  --shadow-card:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(0,0,0,.28);
  --shadow-pop:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px rgba(0,0,0,.6);
  --shadow-drawer:-20px 0 60px rgba(0,0,0,.55);
  --shadow-panel:0 0 0 1px rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.5);
  --deepen:0%;
  --tint:16%;
}