/* ============================================================================
   ВЗЫСК.PRO · ДИЗАЙН-ТОКЕНЫ
   ----------------------------------------------------------------------------
   Единый источник правды для цветов, типографики, отступов и теней
   всех 4 тем визуального языка. Подключайте этот файл первым в проекте,
   затем устанавливайте тему через атрибут [data-theme="ivory"] на <html>
   (или <body>). При отсутствии атрибута применяется тема `ivory`
   (Кремовый Деловой) — она используется по умолчанию.

   Темы:
     [data-theme="graphite"]  — 01 Графит-Янтарь    (тёмная, без бежевого)
     [data-theme="midnight"]  — 02 Полночь-Изумруд  (тёмная, без бежевого)
     [data-theme="sand"]      — 03 Песочный Премиум (тёплая бежевая)
     [data-theme="ivory"]     — 04 Кремовый Деловой (светлая бежевая) ← default

   Все семантические цвета (good / warn / bad / info) выровнены по смыслу
   во всех темах. Бренд-цвета (accent, bronze, plum, gold) могут отличаться.
============================================================================ */

/* ----------------------------------------------------------------------------
   Общие, не зависящие от темы токены
---------------------------------------------------------------------------- */
:root{
  /* --- Радиусы скругления --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* --- Шкала отступов (4-pt grid) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 14px;
  --s-5: 16px;
  --s-6: 18px;
  --s-7: 22px;
  --s-8: 24px;
  --s-9: 28px;
  --s-10: 32px;
  --s-12: 40px;

  /* --- Типографика: размеры --- */
  --fs-10: 10.5px;   /* eyebrow / micro */
  --fs-11: 11.5px;   /* meta / small text */
  --fs-12: 12px;     /* table headers / small body */
  --fs-13: 13px;     /* default body */
  --fs-14: 14px;     /* slightly emphasized body */
  --fs-15: 15px;     /* card titles */
  --fs-16: 16px;     /* sub-headers */
  --fs-17: 17px;     /* H4 (panel headers) */
  --fs-19: 19px;     /* H3 */
  --fs-22: 22px;     /* H2 */
  --fs-28: 28px;     /* H1 small */
  --fs-30: 30px;     /* H1 */
  --fs-32: 32px;     /* page hero H1 */
  --fs-36: 36px;     /* display numbers */
  --fs-44: 44px;     /* hero numbers */

  /* --- Типографика: line-height --- */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.7;

  /* --- Типографика: семейства шрифтов --- */
  --ff-sans: "Inter", "Helvetica Neue", "Segoe UI", Roboto,
             -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-display: "DM Serif Display", "Playfair Display",
                "Georgia", "Times New Roman", serif;
  --ff-mono: "SF Mono", "JetBrains Mono", ui-monospace,
             Menlo, Consolas, monospace;

  /* --- Веса --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Тени --- */
  --shadow-sm: 0 1px 0 rgba(26, 22, 16, .04);
  --shadow-md: 0 2px 8px rgba(26, 22, 16, .06);
  --shadow-lg: 0 6px 24px rgba(26, 22, 16, .12);
  --shadow-xl: 0 12px 40px rgba(26, 22, 16, .18);

  /* --- Анимация --- */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);

  /* --- Z-индексы --- */
  --z-base: 1;
  --z-topbar: 50;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;

  /* --- Размеры shell --- */
  --topbar-h: 64px;
  --statusbar-h: 34px;
  --sidebar-w: 248px;
  --rightbar-w: 320px;
}

/* ============================================================================
   ТЕМА 04 · КРЕМОВЫЙ ДЕЛОВОЙ (по умолчанию)
   --------------------------------------------------------------------------
   Светлая бежевая палитра + чернильный текст + изумрудный акцент +
   бронзовые подсветки. Сейчас на ней реализованы все 13 проработанных
   экранов. Это рекомендуемая база для production.
============================================================================ */
:root,
[data-theme="ivory"]{
  /* Фоны */
  --bg: #faf6ed;          /* основной фон страницы */
  --bg-2: #f4ede0;        /* фон второстепенных областей (rightbar) */
  --panel: #ffffff;       /* фон карточек / поверхностей */
  --panel-2: #fbf6ea;     /* альт. фон для inset-областей внутри карточек */

  /* Разделители */
  --line: #e8dec7;        /* основные тонкие линии */
  --line-2: #cbbf9f;      /* акцентные / более контрастные линии */

  /* Текст */
  --ink: #1a1610;         /* основной цвет текста (чернильный) */
  --ink-soft: #3a322a;    /* приглушённый ink (вторичный текст в строках) */
  --mute: #7a6f5c;        /* приглушённый текст (подписи, мета) */
  --mute-2: #a39681;      /* очень тихий текст (placeholder, неактивное) */

  /* Бренд-акценты */
  --accent: #1d3a2f;          /* основной акцент — глубокий sage */
  --accent-2: #2d5547;        /* акцент hover / градиент-2 */
  --accent-soft: #e6ede9;     /* мягкий фон под accent (badges, hover) */
  --bronze: #b89968;          /* вторичный акцент — бронза (CTA, выделение) */
  --bronze-2: #8e7344;        /* бронза hover */
  --bronze-soft: #f3ead7;     /* мягкий фон под бронзу */

  /* Семантические */
  --good: #3d6b4e;        /* зелёный — успех, оплата, OK */
  --warn: #b07a2a;        /* янтарный — внимание, SLA, дедлайн */
  --bad: #9b3030;         /* красный — ошибка, банкротство, критично */
  --info: #3a5a7a;        /* синий — информация, нейтральные сигналы */
  --plum: #6b3a5c;        /* сливовый — банкротство, особый статус */

  /* Состояния compound (для пилюль / тегов) */
  --good-soft: #eaf0eb;
  --good-line: #cfdfd2;
  --warn-soft: #fbf3e1;
  --warn-line: #dcc095;
  --bad-soft: #fbe9e9;
  --bad-line: #d6a5a5;
  --info-soft: #e0eaf2;
  --info-line: #9dbacc;
  --plum-soft: #ece4ec;
  --plum-line: #c69ec0;

  /* Графики */
  --chart-1: var(--accent);
  --chart-2: var(--bronze);
  --chart-3: var(--plum);
  --chart-4: var(--info);
  --chart-5: var(--warn);

  /* Семейства шрифтов для темы (могут отличаться) */
  --ff-display-theme: "DM Serif Display", "Georgia", serif;
}

/* ============================================================================
   ТЕМА 03 · ПЕСОЧНЫЙ ПРЕМИУМ
   --------------------------------------------------------------------------
   Тёплый песочный + бордовый акцент + тёмное дерево.
   Стиль: нотариальная / адвокатская контора, благородство.
============================================================================ */
[data-theme="sand"]{
  --bg: #f4ecdc;
  --bg-2: #ede2cc;
  --panel: #fbf6ea;
  --panel-2: #f0e6cf;

  --line: #d9c8a7;
  --line-2: #b8a37c;

  --ink: #2a1d10;
  --ink-soft: #4a3520;
  --mute: #7d6849;
  --mute-2: #9b8866;

  --accent: #5c2a2a;          /* бордо */
  --accent-2: #7a3838;
  --accent-soft: #f1e4d2;
  --bronze: #a8853a;          /* в этой теме «золотой» оттенок */
  --bronze-2: #856721;
  --bronze-soft: #ede0bf;
  --wood: #3a2615;            /* тёмное дерево — для statusbar */

  --good: #5a7a3a;
  --warn: #a8651a;
  --bad: #8b2e2e;
  --info: #3a5a7a;
  --plum: #6b3a5c;

  --good-soft: #dfe7d6;   --good-line: #b9c89e;
  --warn-soft: #f0d9a8;   --warn-line: #d0b06a;
  --bad-soft: #e8c9c9;    --bad-line: #c98080;
  --info-soft: #dbe5ef;   --info-line: #9bb3cc;
  --plum-soft: #d8c8d8;   --plum-line: #b297b2;

  --chart-1: var(--accent);
  --chart-2: var(--bronze);
  --chart-3: var(--plum);
  --chart-4: var(--info);
  --chart-5: var(--warn);

  --ff-display-theme: "Playfair Display", "Georgia", serif;
}

/* ============================================================================
   ТЕМА 01 · ГРАФИТ-ЯНТАРЬ
   --------------------------------------------------------------------------
   Тёмный графит + янтарный акцент. Плотные данные, моноширинные цифры.
   Стиль: Bloomberg-терминал, банковская in-house система.
============================================================================ */
[data-theme="graphite"]{
  --bg: #0b0d12;
  --bg-2: #10141c;
  --panel: #161a22;
  --panel-2: #1c2230;

  --line: #262c38;
  --line-2: #323a4c;

  --ink: #e7eaf2;           /* в тёмных темах ink = светлый */
  --ink-soft: #c8cdd9;
  --mute: #8a94a6;
  --mute-2: #5e6678;

  --accent: #f5b942;          /* янтарь */
  --accent-2: #ffd271;
  --accent-soft: rgba(245, 185, 66, .12);
  --bronze: #f5b942;          /* в этой теме акцент = бронза */
  --bronze-2: #c97316;
  --bronze-soft: rgba(245, 185, 66, .16);

  --good: #4ade80;
  --warn: #fb923c;
  --bad: #f87171;
  --info: #60a5fa;
  --plum: #c084fc;

  --good-soft: rgba(74, 222, 128, .12);   --good-line: rgba(74, 222, 128, .25);
  --warn-soft: rgba(251, 146, 60, .12);   --warn-line: rgba(251, 146, 60, .25);
  --bad-soft: rgba(248, 113, 113, .12);   --bad-line: rgba(248, 113, 113, .25);
  --info-soft: rgba(96, 165, 250, .12);   --info-line: rgba(96, 165, 250, .25);
  --plum-soft: rgba(192, 132, 252, .12);  --plum-line: rgba(192, 132, 252, .25);

  --chart-1: var(--accent);
  --chart-2: var(--info);
  --chart-3: var(--plum);
  --chart-4: var(--good);
  --chart-5: var(--warn);

  /* В этой теме не используется serif для UI — только моно для цифр */
  --ff-display-theme: var(--ff-sans);
}

/* ============================================================================
   ТЕМА 02 · ПОЛНОЧЬ-ИЗУМРУД
   --------------------------------------------------------------------------
   Глубокий navy + изумрудный акцент. Премиум-tech.
   Стиль: private banking, презентации совету директоров.
============================================================================ */
[data-theme="midnight"]{
  --bg: #050a16;
  --bg-2: #0a1325;
  --panel: #0e1830;
  --panel-2: #152141;

  --line: #1c2a4d;
  --line-2: #2a3b66;

  --ink: #e8f1ff;
  --ink-soft: #c2d0e8;
  --mute: #8aa0c4;
  --mute-2: #586c91;

  --accent: #5eead4;          /* изумруд */
  --accent-2: #a7f3e2;
  --accent-soft: rgba(94, 234, 212, .12);
  --bronze: #d4b572;          /* в этой теме gold вместо bronze */
  --bronze-2: #b09250;
  --bronze-soft: rgba(212, 181, 114, .14);

  --good: #5eead4;
  --warn: #fbbf24;
  --bad: #fb7185;
  --info: #7dd3fc;
  --plum: #c084fc;

  --good-soft: rgba(94, 234, 212, .12);   --good-line: rgba(94, 234, 212, .25);
  --warn-soft: rgba(251, 191, 36, .12);   --warn-line: rgba(251, 191, 36, .25);
  --bad-soft: rgba(251, 113, 133, .12);   --bad-line: rgba(251, 113, 133, .25);
  --info-soft: rgba(125, 211, 252, .12);  --info-line: rgba(125, 211, 252, .25);
  --plum-soft: rgba(192, 132, 252, .12);  --plum-line: rgba(192, 132, 252, .25);

  --chart-1: var(--accent);
  --chart-2: var(--bronze);
  --chart-3: var(--plum);
  --chart-4: var(--info);
  --chart-5: var(--warn);

  --ff-display-theme: "DM Serif Display", "Playfair Display", serif;
}

/* ============================================================================
   ОБЩИЕ КОМПОНЕНТНЫЕ ШОРТКАТЫ (опционально)
   --------------------------------------------------------------------------
   Если хотите — можно подключать как утилитарные классы.
   Здесь не повторяем весь компонентный набор: он подробно описан в
   BRANDBOOK.md и реализован inline в каждом .html. При переходе на React/
   Vue/Svelte эти шорткаты можно превратить в полноценные стили компонентов.
============================================================================ */