/* Цветовые токены МАКСИ — три слоя. Подключается первым на каждой странице.

   1. Примитивы  — шкалы Radix Colors (radix-ui.com/colors), тёмная тема:
                   Slate, Indigo, Tomato, Grass, Amber, по 12 шагов. Других цветов
                   на сайте нет — ни в интерфейсе, ни в иллюстрациях.
                   Шаги по смыслу Radix: 1–2 фон · 3–5 заливки элементов ·
                   6–8 линии и рамки · 9–10 сплошной цвет · 11 тихий текст · 12 текст.
   2. Семантика  — роль цвета: фон, текст, линия, акцент, статус. Этим красятся
                   страницы. Короткие имена (--bg, --ink…) сохранены: на них
                   держатся сотни мест в разметке.
   3. Компоненты — цвета конкретного элемента. Ссылаются только на семантику.

   Иллюстрации тоже берут цвета отсюда — через примитивы напрямую, это разрешено. */

:root{
  /* ---------- 1. Примитивы ---------- */

  /* Slate — нейтральная основа интерфейса: фоны, линии, текст */
  --slate-1:#111113; --slate-2:#18191b; --slate-3:#212225; --slate-4:#272a2d; --slate-5:#2e3135; --slate-6:#363a3f;
  --slate-7:#43484e; --slate-8:#5a6169; --slate-9:#696e77; --slate-10:#777b84; --slate-11:#b0b4ba; --slate-12:#edeef0;

  /* Indigo — акцент */
  --indigo-1:#11131f; --indigo-2:#141726; --indigo-3:#182449; --indigo-4:#1d2e62; --indigo-5:#253974; --indigo-6:#304384;
  --indigo-7:#3a4f97; --indigo-8:#435db1; --indigo-9:#3e63dd; --indigo-10:#5472e4; --indigo-11:#9eb1ff; --indigo-12:#d6e1ff;

  /* Tomato — ошибки, тревога */
  --tomato-1:#181111; --tomato-2:#1f1513; --tomato-3:#391714; --tomato-4:#4e1511; --tomato-5:#5e1c16; --tomato-6:#6e2920;
  --tomato-7:#853a2d; --tomato-8:#ac4d39; --tomato-9:#e54d2e; --tomato-10:#ec6142; --tomato-11:#ff977d; --tomato-12:#fbd3cb;

  /* Grass — успех */
  --grass-1:#0e1511; --grass-2:#141a15; --grass-3:#1b2a1e; --grass-4:#1d3a24; --grass-5:#25482d; --grass-6:#2d5736;
  --grass-7:#366740; --grass-8:#3e7949; --grass-9:#46a758; --grass-10:#53b365; --grass-11:#71d083; --grass-12:#c2f0c2;

  /* Amber — предупреждение, выделение */
  --amber-1:#16120c; --amber-2:#1d180f; --amber-3:#302008; --amber-4:#3f2700; --amber-5:#4d3000; --amber-6:#5c3d05;
  --amber-7:#714f19; --amber-8:#8f6424; --amber-9:#ffc53d; --amber-10:#ffd60a; --amber-11:#ffca16; --amber-12:#ffe7b3;

  --white:#ffffff; --black:#000000;

  /* ---------- 2. Семантика ---------- */

  /* Фоны: страница → панель → приподнятая панель */
  --bg:color-mix(in srgb,var(--slate-1) 62%,var(--black));   /* страница темнее панелей */
  --bg2:var(--slate-1);
  --panel:var(--slate-2);
  --panel2:var(--slate-3);
  --bg-sunken:color-mix(in srgb,var(--slate-1) 62%,var(--black));
  --bg-overlay:color-mix(in srgb,var(--slate-1) 80%,transparent);

  /* Линии */
  --line:var(--slate-4);
  --line2:var(--slate-5);

  /* Текст: основной → вторичный → третичный */
  --ink:var(--slate-12);
  --ink2:var(--slate-11);
  --ink3:var(--slate-10);
  --ink-on-acc:var(--slate-1);

  /* Акцент */
  --acc:var(--indigo-11);
  --acc-solid:var(--indigo-9);
  --acc-gradient:linear-gradient(180deg,var(--indigo-10),var(--indigo-9));
  --acc-soft:var(--indigo-12);
  --acc-glow:color-mix(in srgb,var(--indigo-9) 35%,transparent);

  /* Статусы */
  --ok:var(--grass-11);
  --warn:var(--amber-11);
  --bad:var(--tomato-11);
  --danger:var(--tomato-11);

  /* Сферы бизнеса — на карте, в сферах и в аналитике */
  --s-sales:var(--tomato-10); --s-clients:var(--tomato-11); --s-fin:var(--amber-9);
  --s-ops:var(--grass-11); --s-site:var(--indigo-11); --s-an:var(--indigo-10);

  /* ---------- 3. Компоненты ---------- */

  /* Кнопка основная */
  --btn-bg:var(--acc-gradient);
  --btn-ink:var(--white);
  --btn-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 18%,transparent);
  --btn-disabled-bg:var(--slate-4);
  --btn-disabled-ink:var(--ink3);

  /* Поле ввода */
  --field-bg:var(--slate-1);
  --field-border:var(--line);
  --field-border-focus:var(--slate-8);
  --field-ring:var(--acc-glow);
  --field-error:var(--danger);

  /* Плитка */
  --edge:linear-gradient(180deg,color-mix(in srgb,var(--slate-12) 14%,transparent),color-mix(in srgb,var(--slate-12) 5%,transparent) 45%,transparent 75%);
  --edge-hover:linear-gradient(180deg,color-mix(in srgb,var(--slate-12) 28%,transparent),color-mix(in srgb,var(--slate-12) 8%,transparent) 55%,transparent 85%);
  --spot:color-mix(in srgb,var(--indigo-9) 16%,transparent);
  /* как карточка Radix Themes (variant surface): полупрозрачная панель + сильный блюр
     того, что под ней, тонкая светлая рамка */
  --tile-bg:color-mix(in srgb,var(--slate-2) 70%,transparent);
  --tile-blur:blur(64px);
  --tile-highlight:inset 0 1px 0 color-mix(in srgb,var(--slate-12) 5%,transparent);
  --tile-glow:color-mix(in srgb,var(--indigo-9) 30%,transparent);
  --tile-glow-2:color-mix(in srgb,var(--indigo-9) 12%,transparent);
  --tile-border:color-mix(in srgb,var(--slate-12) 10%,transparent);

  /* Плитка-призыв «Обсудить задачу» */
  --promo-bg:radial-gradient(120% 90% at 100% 0%,var(--indigo-10),transparent 60%),linear-gradient(155deg,var(--indigo-9),var(--indigo-7));
  --promo-ink:var(--white);
  --promo-icon-bg:var(--slate-1);
  --promo-icon:var(--white);

  /* Фактура: сетка точек — фон карусели дашбордов, херо, сфер и финального блока */
  --dots:radial-gradient(var(--slate-5) 1px,transparent 1.2px);
  --dots-size:16px 16px;

  /* Модалка */
  --modal-bg:var(--bg2);
  --modal-border:var(--line);
  --modal-backdrop:var(--bg-overlay);

  /* Черновик / заметка */
  --draft-border:var(--amber-7);
  --draft-bg:var(--amber-2);
}