/* ============================================================
   «Метод Цифры» — дизайн-токены, версия 2.0.0 (29.10.2026)
   Палитра — с постера МЦ (решение владельца 29.10: цвета логотипа — часть системы и работают в интерфейсе).
   Имена токенов — как в 1.6.0: компоненты и приложения на --dx-* подключаются без правки.
   Тёмная тема — по умолчанию (как в 1.6.0); светлая — <html data-dx-theme="light">.
   Подключать первым, до components.css и brand.css.
   ============================================================ */

:root{
  /* ---------- палитра (сырые значения, в разметке не использовать) ---------- */
  --dx-navy-900:#061634;  /* ground постера: фон тёмной темы, шапка обеих тем */
  --dx-navy-800:#0A1F40;
  --dx-navy-700:#04102A;
  --dx-navy-600:#0B2347;  /* карточка */
  --dx-navy-500:#0F2C57;
  --dx-ink-900:#061634;   /* текст на голубой заливке */
  --dx-white-050:#F4F8FD;
  --dx-white-200:#A9BCD9; /* туман постера */
  --dx-white-400:#8AA2C4;

  --dx-blue-500:#29ABE2;  /* голубой логотипа — акцент тёмной темы */
  --dx-blue-400:#5CC3EC;  /* hover основной кнопки */
  --dx-blue-300:#7FD0F0;
  --dx-green-500:#3CCF91;
  --dx-green-300:#8BE6BF;
  --dx-red-500:#FF7F73;
  --dx-red-400:#FF978D;   /* hover опасной кнопки */
  --dx-red-300:#FFB1A9;
  --dx-amber-500:#F2B24C;

  /* фирменная пятёрка постера — одинакова в обеих темах; работает в интерфейсе (2.0) */
  --dx-brand-navy:#061634;      /* шапка, обложки */
  --dx-brand-panel-hi:#044275;  /* градиент фирменных панелей и карточки */
  --dx-brand-panel-lo:#052245;
  --dx-brand-blue:#0071BC;      /* заливки и кнопки в светлой теме, логотип */
  --dx-brand-cyan:#29ABE2;      /* черты, линии, иконки; акцент тёмной темы */
  --dx-brand-sky:var(--dx-brand-cyan);
  --dx-brand-mist:#A9BCD9;      /* подписи на тёмном */
  --dx-on-brand:#FFFFFF;
  --dx-brand-gradient:linear-gradient(180deg,var(--dx-brand-panel-hi),var(--dx-brand-panel-lo));

  /* графики: факт, сравнение, прогноз (заливка + пунктир chart-1) */
  --dx-chart-1:#29ABE2;
  --dx-chart-2:#2F5D92;
  --dx-chart-forecast:#173E6B;

  /* ---------- поверхности ---------- */
  --dx-surface-base:var(--dx-navy-900);     /* фон страницы */
  --dx-surface-raised:var(--dx-navy-800);
  --dx-surface-sunken:var(--dx-navy-700);
  --dx-surface-card:var(--dx-navy-600);
  --dx-surface-card-top:var(--dx-navy-500); /* верх градиента карточки */
  --dx-surface-field:rgba(6,11,20,.6);      /* фон поля ввода */
  --dx-surface-inset:rgba(0,0,0,.25);       /* pre, вложенные блоки */
  --dx-surface-subtle:rgba(255,255,255,.015);
  --dx-surface-header:rgba(6,22,52,.88);   /* липкая шапка + blur */
  --dx-surface-scrim:rgba(2,8,22,.72);      /* подложка модалки */

  --dx-card-gradient:linear-gradient(180deg,var(--dx-surface-card-top),var(--dx-surface-card));
  --dx-surface-disabled:rgba(255,255,255,.06);
  --dx-row-alt:rgba(255,255,255,.025);   /* раскрытая строка таблицы */
  --dx-selection:rgba(41,171,226,.30);
  --dx-switch-knob:var(--dx-text-strong);
  --dx-skel-base:rgba(255,255,255,.05);
  --dx-skel-shine:rgba(255,255,255,.07);
  --dx-kpi-gradient:linear-gradient(180deg,rgba(41,171,226,.10),rgba(255,255,255,.018));
  --dx-kpi-line:rgba(41,171,226,.26);
  --dx-banner-danger:linear-gradient(90deg,rgba(255,127,115,.14),rgba(255,127,115,.03));
  --dx-banner-info:linear-gradient(90deg,rgba(41,171,226,.14),rgba(41,171,226,.03));
  --dx-banner-warn:linear-gradient(90deg,rgba(242,178,76,.16),rgba(242,178,76,.03));
  --dx-ring-neutral:rgba(107,124,150,.15);
  --dx-ring-ok:rgba(60,207,145,.16);
  --dx-ring-danger:rgba(255,127,115,.16);
  --dx-ring-warn:rgba(242,178,76,.18);
  --dx-page-glow:
    radial-gradient(1000px 600px at 85% -10%,rgba(41,171,226,.14),transparent 62%),
    radial-gradient(700px 500px at -10% 30%,rgba(0,113,188,.10),transparent 60%);

  /* ---------- текст ---------- */
  --dx-text-strong:var(--dx-white-050);   /* основной */
  --dx-text-muted:var(--dx-white-200);    /* подписи, вторичный */
  --dx-text-faint:var(--dx-white-400);    /* минимум, контраст ≥4.5:1 на карточке */
  --dx-text-on-accent:var(--dx-ink-900);
  --dx-text-link:var(--dx-blue-300);

  /* ---------- границы ---------- */
  --dx-border:#1D3D69;                   /* разделители, рамка карточки */
  --dx-border-strong:#2F5585;            /* поля, кнопки-призраки (3:1) */
  --dx-border-hover:#4A72A3;

  /* ---------- акценты и состояния ---------- */
  --dx-accent:var(--dx-blue-500);
  --dx-accent-hover:var(--dx-blue-400);
  --dx-accent-soft:var(--dx-blue-300);
  --dx-accent-line:rgba(41,171,226,.35);
  --dx-accent-edge:rgba(41,171,226,.55);  /* рамка при наведении */
  --dx-accent-tint:rgba(41,171,226,.12);
  --dx-accent-wash:rgba(41,171,226,.10);  /* фон призрачной кнопки при наведении */
  --dx-accent-ring:rgba(41,171,226,.18);
  --dx-accent-focus:rgba(41,171,226,.70);

  --dx-ok:var(--dx-green-500);
  --dx-ok-soft:var(--dx-green-300);
  --dx-ok-line:rgba(60,207,145,.38);
  --dx-ok-tint:rgba(60,207,145,.08);

  --dx-danger:var(--dx-red-500);
  --dx-danger-hover:var(--dx-red-400);
  --dx-danger-soft:var(--dx-red-300);
  --dx-danger-line:rgba(255,127,115,.40);
  --dx-danger-edge:rgba(255,127,115,.60);
  --dx-danger-tint:rgba(255,127,115,.08);
  --dx-danger-focus:rgba(255,127,115,.70);
  --dx-text-on-danger:#1A0508;
  --dx-danger-btn-bg:var(--dx-danger);
  --dx-danger-btn-bg-hover:var(--dx-danger-hover);
  --dx-danger-btn-ink:var(--dx-text-on-danger);
  --dx-danger-btn-line:transparent;

  --dx-warn:var(--dx-amber-500);
  --dx-warn-line:rgba(242,178,76,.50);
  --dx-warn-tint:rgba(242,178,76,.16);

  /* ---------- типографика ---------- */
  --dx-font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,
    'Helvetica Neue',Arial,sans-serif;
  --dx-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* 2.2: пара шрифтов по ролям. Montserrat — заголовки, названия карточек, крупные цифры;
     Golos Text — основной текст, подписи, таблицы, кнопки, меню (читается в мелком размере).
     Включается атрибутом data-dx-fonts="pair" на <html>; без него всё по-прежнему на --dx-font. */
  --dx-font-head:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  --dx-font-text:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;

  --dx-fs-h1:clamp(28px,3.3vw,42px);
  --dx-fs-h2:clamp(21px,2.1vw,27px);
  --dx-fs-h3:18px;
  --dx-fs-lead:clamp(15.5px,1.4vw,18px);  /* .sub */
  --dx-fs-body:16px;
  --dx-fs-ui:15px;                         /* кнопки, табы, таблицы */
  --dx-fs-sm:14px;                         /* .quiet, подписи */
  --dx-fs-xs:13px;                         /* пилюли, подсказки */
  --dx-fs-label:13.5px;
  --dx-fs-caps:12px;                       /* надзаголовки таблиц */

  --dx-fw-regular:400;
  --dx-fw-medium:500;
  --dx-fw-semibold:600;
  --dx-fw-bold:700;
  --dx-fw-black:800;   /* крупные цифры постера: «20+», «8 лет» */

  /* шкала приложений (фиксированная, без clamp): заголовки 24/18/16, текст 14, вторичный 13, капс 12 */
  --dx-fs-app-h1:24px;
  --dx-fs-app-h2:18px;
  --dx-fs-app-h3:16px;
  --dx-fs-app-body:14px;
  --dx-fs-app-sm:13px;
  --dx-fs-app-xs:12px;
  --dx-fs-kpi:26px;
  --dx-fs-stat:64px;   /* цифра постера, разрядка --dx-ls-display */

  --dx-lh-tight:1.12;   /* заголовки */
  --dx-lh-snug:1.45;
  --dx-lh-body:1.6;

  --dx-ls-display:-.03em;
  --dx-ls-heading:-.02em;
  --dx-ls-caps:.16em;
  --dx-ls-eyebrow:.22em;

  /* ---------- сетка и отступы ---------- */
  --dx-wrap:1200px;
  --dx-gutter:clamp(20px,5vw,48px);
  --dx-header-h:72px;

  --dx-space-1:4px;
  --dx-space-2:8px;
  --dx-space-3:12px;
  --dx-space-4:16px;
  --dx-space-5:20px;
  --dx-space-6:26px;
  --dx-space-7:32px;
  --dx-space-8:40px;
  --dx-block-gap:clamp(40px,5vw,60px);   /* между смысловыми блоками */
  --dx-card-pad:24px 26px;

  /* ---------- радиусы ---------- */
  --dx-radius-card:16px;
  --dx-radius-banner:14px;
  --dx-radius-field:12px;
  --dx-radius-chip:8px;
  --dx-radius-pill:100px;

  /* ---------- тени и фокус ---------- */
  --dx-shadow-accent:0 20px 50px -26px rgba(41,171,226,.95);
  --dx-shadow-card:0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.35);
  --dx-shadow-pop:0 18px 48px rgba(0,0,0,.5);
  --dx-focus:2px solid var(--dx-blue-300);
  --dx-focus-offset:3px;

  /* ---------- анимация ---------- */
  --dx-ease:cubic-bezier(.4,0,.2,1);
  --dx-dur-fast:.2s;
  --dx-dur:.25s;

  /* ---------- слои ---------- */
  --dx-z-header:50;
  --dx-z-dialog:100;
}

/* ============================================================
   СВЕТЛАЯ ТЕМА
   Включается атрибутом на <html>: <html data-dx-theme="light">.
   Переопределяются только смысловые токены — палитра и компоненты
   не трогаются. Автопереключение по системной настройке — ниже.
   ============================================================ */
[data-dx-theme="light"]{
  /* палитра светлой темы */
  --dx-paper-000:#FFFFFF;
  --dx-paper-050:#EAF0F8;   /* холодный голубоватый фон — светлая тема не бледнеет */
  --dx-paper-100:#DFE8F3;
  --dx-paper-200:#D3DFEC;
  --dx-slate-900:#061634;   /* текст — navy постера */
  --dx-slate-700:#3A5373;
  --dx-slate-500:#4F6A8C;   /* ≥4,5:1 на фоне и карточке */

  /* синий логотипа — заливки; ссылки и активное — #0067AB (голубой текстом на белом не держит 4,5:1) */
  --dx-blue-ink:#0071BC;
  --dx-blue-ink-hover:#005A96;
  --dx-blue-ink-text:#0067AB;
  --dx-green-ink:#13784F;
  --dx-red-ink:#BB2F26;
  --dx-red-ink-hover:#9C261F;
  --dx-amber-ink:#9A5800;

  --dx-chart-1:#0071BC;
  --dx-chart-2:#9FC3E3;
  --dx-chart-forecast:#CFE4F5;

  /* поверхности */
  --dx-surface-base:var(--dx-paper-050);
  --dx-surface-raised:var(--dx-paper-000);
  --dx-surface-sunken:var(--dx-paper-100);
  --dx-surface-card:var(--dx-paper-000);
  --dx-surface-card-top:var(--dx-paper-000);
  --dx-surface-field:var(--dx-paper-000);
  --dx-surface-inset:var(--dx-paper-100);
  --dx-surface-subtle:rgba(14,22,38,.012);
  --dx-surface-header:rgba(234,240,248,.88);
  --dx-surface-scrim:rgba(6,22,52,.42);
  --dx-surface-disabled:rgba(14,22,38,.05);
  --dx-row-alt:rgba(14,22,38,.028);

  --dx-card-gradient:linear-gradient(180deg,var(--dx-paper-000),var(--dx-paper-000));
  --dx-page-glow:
    radial-gradient(1000px 600px at 85% -10%,rgba(0,113,188,.08),transparent 62%),
    radial-gradient(700px 500px at -10% 30%,rgba(41,171,226,.06),transparent 60%);

  /* текст */
  --dx-text-strong:var(--dx-slate-900);
  --dx-text-muted:var(--dx-slate-700);
  --dx-text-faint:var(--dx-slate-500);
  --dx-text-on-accent:#FFFFFF;
  --dx-text-on-danger:#FFFFFF;
  --dx-text-link:var(--dx-blue-ink-text);

  /* границы — на светлом заметнее, чем полупрозрачный белый на тёмном */
  --dx-border:#D3DFEC;
  --dx-border-strong:#A9BDD3;
  --dx-border-hover:#7F9AB8;

  /* акцент */
  --dx-accent:var(--dx-blue-ink);
  --dx-accent-hover:var(--dx-blue-ink-hover);
  --dx-accent-soft:var(--dx-blue-ink-text);
  --dx-accent-line:rgba(0,113,188,.32);
  --dx-accent-edge:rgba(0,113,188,.55);
  --dx-accent-tint:rgba(0,113,188,.10);
  --dx-accent-wash:rgba(0,113,188,.07);
  --dx-accent-ring:rgba(0,113,188,.16);
  --dx-accent-focus:rgba(0,113,188,.65);

  /* состояния */
  --dx-ok:var(--dx-green-ink);
  --dx-ok-soft:var(--dx-green-ink);
  --dx-ok-line:rgba(14,122,87,.34);
  --dx-ok-tint:rgba(14,122,87,.07);

  --dx-danger:var(--dx-red-ink);
  --dx-danger-hover:var(--dx-red-ink-hover);
  --dx-danger-soft:var(--dx-red-ink);
  --dx-danger-line:rgba(192,48,63,.34);
  --dx-danger-edge:rgba(192,48,63,.55);
  --dx-danger-tint:rgba(192,48,63,.06);
  --dx-danger-focus:rgba(192,48,63,.65);
  /* Кнопка опасного действия на светлом — светлая заливка с тёмным текстом:
     белый текст на насыщенном красном читается хуже и давит на макет. */
  --dx-danger-btn-bg:#FBE8EA;
  --dx-danger-btn-bg-hover:#F6D7DB;
  --dx-danger-btn-ink:#8E1F2B;
  --dx-danger-btn-line:rgba(142,31,43,.28);

  --dx-warn:var(--dx-amber-ink);
  --dx-warn-line:rgba(138,90,0,.40);
  --dx-warn-tint:rgba(138,90,0,.09);

  /* производное */
  --dx-selection:rgba(0,113,188,.18);
  --dx-switch-knob:#FFFFFF;
  --dx-skel-base:rgba(14,22,38,.07);
  --dx-skel-shine:rgba(255,255,255,.65);
  --dx-kpi-gradient:linear-gradient(180deg,rgba(0,113,188,.07),rgba(255,255,255,0));
  --dx-kpi-line:rgba(0,113,188,.22);
  --dx-banner-danger:linear-gradient(90deg,rgba(192,48,63,.10),rgba(192,48,63,.02));
  --dx-banner-info:linear-gradient(90deg,rgba(0,113,188,.10),rgba(0,113,188,.02));
  --dx-banner-warn:linear-gradient(90deg,rgba(138,90,0,.12),rgba(138,90,0,.02));
  --dx-ring-neutral:rgba(91,107,132,.18);
  --dx-ring-ok:rgba(14,122,87,.18);
  --dx-ring-danger:rgba(192,48,63,.18);
  --dx-ring-warn:rgba(138,90,0,.20);

  /* тень вместо свечения: на светлом свечение не читается */
  --dx-shadow-accent:0 10px 22px -16px rgba(6,22,52,.35);
  --dx-shadow-card:0 1px 2px rgba(6,22,52,.06),0 8px 28px rgba(6,22,52,.08);
  --dx-shadow-pop:0 18px 48px rgba(6,22,52,.22);
}

/* Автотема по системной настройке — для приложений, где тему не выбирают явно:
   <html data-dx-theme="auto">. Значения те же, что у светлой темы выше. */
@media (prefers-color-scheme: light){[data-dx-theme="auto"]{
  /* палитра светлой темы */
  --dx-paper-000:#FFFFFF;
  --dx-paper-050:#EAF0F8;   /* холодный голубоватый фон — светлая тема не бледнеет */
  --dx-paper-100:#DFE8F3;
  --dx-paper-200:#D3DFEC;
  --dx-slate-900:#061634;   /* текст — navy постера */
  --dx-slate-700:#3A5373;
  --dx-slate-500:#4F6A8C;   /* ≥4,5:1 на фоне и карточке */

  /* синий логотипа — заливки; ссылки и активное — #0067AB (голубой текстом на белом не держит 4,5:1) */
  --dx-blue-ink:#0071BC;
  --dx-blue-ink-hover:#005A96;
  --dx-blue-ink-text:#0067AB;
  --dx-green-ink:#13784F;
  --dx-red-ink:#BB2F26;
  --dx-red-ink-hover:#9C261F;
  --dx-amber-ink:#9A5800;

  --dx-chart-1:#0071BC;
  --dx-chart-2:#9FC3E3;
  --dx-chart-forecast:#CFE4F5;

  /* поверхности */
  --dx-surface-base:var(--dx-paper-050);
  --dx-surface-raised:var(--dx-paper-000);
  --dx-surface-sunken:var(--dx-paper-100);
  --dx-surface-card:var(--dx-paper-000);
  --dx-surface-card-top:var(--dx-paper-000);
  --dx-surface-field:var(--dx-paper-000);
  --dx-surface-inset:var(--dx-paper-100);
  --dx-surface-subtle:rgba(14,22,38,.012);
  --dx-surface-header:rgba(234,240,248,.88);
  --dx-surface-scrim:rgba(6,22,52,.42);
  --dx-surface-disabled:rgba(14,22,38,.05);
  --dx-row-alt:rgba(14,22,38,.028);

  --dx-card-gradient:linear-gradient(180deg,var(--dx-paper-000),var(--dx-paper-000));
  --dx-page-glow:
    radial-gradient(1000px 600px at 85% -10%,rgba(0,113,188,.08),transparent 62%),
    radial-gradient(700px 500px at -10% 30%,rgba(41,171,226,.06),transparent 60%);

  /* текст */
  --dx-text-strong:var(--dx-slate-900);
  --dx-text-muted:var(--dx-slate-700);
  --dx-text-faint:var(--dx-slate-500);
  --dx-text-on-accent:#FFFFFF;
  --dx-text-on-danger:#FFFFFF;
  --dx-text-link:var(--dx-blue-ink-text);

  /* границы — на светлом заметнее, чем полупрозрачный белый на тёмном */
  --dx-border:#D3DFEC;
  --dx-border-strong:#A9BDD3;
  --dx-border-hover:#7F9AB8;

  /* акцент */
  --dx-accent:var(--dx-blue-ink);
  --dx-accent-hover:var(--dx-blue-ink-hover);
  --dx-accent-soft:var(--dx-blue-ink-text);
  --dx-accent-line:rgba(0,113,188,.32);
  --dx-accent-edge:rgba(0,113,188,.55);
  --dx-accent-tint:rgba(0,113,188,.10);
  --dx-accent-wash:rgba(0,113,188,.07);
  --dx-accent-ring:rgba(0,113,188,.16);
  --dx-accent-focus:rgba(0,113,188,.65);

  /* состояния */
  --dx-ok:var(--dx-green-ink);
  --dx-ok-soft:var(--dx-green-ink);
  --dx-ok-line:rgba(14,122,87,.34);
  --dx-ok-tint:rgba(14,122,87,.07);

  --dx-danger:var(--dx-red-ink);
  --dx-danger-hover:var(--dx-red-ink-hover);
  --dx-danger-soft:var(--dx-red-ink);
  --dx-danger-line:rgba(192,48,63,.34);
  --dx-danger-edge:rgba(192,48,63,.55);
  --dx-danger-tint:rgba(192,48,63,.06);
  --dx-danger-focus:rgba(192,48,63,.65);
  /* Кнопка опасного действия на светлом — светлая заливка с тёмным текстом:
     белый текст на насыщенном красном читается хуже и давит на макет. */
  --dx-danger-btn-bg:#FBE8EA;
  --dx-danger-btn-bg-hover:#F6D7DB;
  --dx-danger-btn-ink:#8E1F2B;
  --dx-danger-btn-line:rgba(142,31,43,.28);

  --dx-warn:var(--dx-amber-ink);
  --dx-warn-line:rgba(138,90,0,.40);
  --dx-warn-tint:rgba(138,90,0,.09);

  /* производное */
  --dx-selection:rgba(0,113,188,.18);
  --dx-switch-knob:#FFFFFF;
  --dx-skel-base:rgba(14,22,38,.07);
  --dx-skel-shine:rgba(255,255,255,.65);
  --dx-kpi-gradient:linear-gradient(180deg,rgba(0,113,188,.07),rgba(255,255,255,0));
  --dx-kpi-line:rgba(0,113,188,.22);
  --dx-banner-danger:linear-gradient(90deg,rgba(192,48,63,.10),rgba(192,48,63,.02));
  --dx-banner-info:linear-gradient(90deg,rgba(0,113,188,.10),rgba(0,113,188,.02));
  --dx-banner-warn:linear-gradient(90deg,rgba(138,90,0,.12),rgba(138,90,0,.02));
  --dx-ring-neutral:rgba(91,107,132,.18);
  --dx-ring-ok:rgba(14,122,87,.18);
  --dx-ring-danger:rgba(192,48,63,.18);
  --dx-ring-warn:rgba(138,90,0,.20);

  /* тень вместо свечения: на светлом свечение не читается */
  --dx-shadow-accent:0 10px 22px -16px rgba(6,22,52,.35);
  --dx-shadow-card:0 1px 2px rgba(6,22,52,.06),0 8px 28px rgba(6,22,52,.08);
  --dx-shadow-pop:0 18px 48px rgba(6,22,52,.22);
}}

/* ============================================================
   Совместимость с pb-extractor: старые короткие имена.
   Даёт подключить систему в существующее приложение без правки
   его CSS. В новых приложениях использовать только --dx-*.
   ============================================================ */
:root{
  --bg0:var(--dx-surface-base);   --bg1:var(--dx-surface-raised); --bg2:var(--dx-surface-sunken);
  --card:var(--dx-surface-card);  --card2:var(--dx-surface-card-top);
  --line:var(--dx-border);        --line2:var(--dx-border-strong);
  --tx:var(--dx-text-strong);     --tx2:var(--dx-text-muted);     --tx3:var(--dx-text-faint);
  --blue:var(--dx-accent);        --blue2:var(--dx-accent-soft);
  --green:var(--dx-ok);           --green2:var(--dx-ok-soft);
  --red:var(--dx-danger);         --red2:var(--dx-danger-soft);
  --amber:var(--dx-warn);
  --disp:var(--dx-font);
  --wrap:var(--dx-wrap);          --gut:var(--dx-gutter);
  --head:var(--dx-header-h);      --r:var(--dx-radius-card);
}

/* ============================================================
   Совместимость с DM Realty / Claude Design (2.0): короткие имена
   «Штаба застройщика» и токены Claude Design → --dx-*. Подключать,
   если приложение ещё пишет var(--ink), var(--panel) и т. п.
   ============================================================ */
:root{
  --ink:var(--dx-text-strong); --ink-2:var(--dx-text-muted); --ink-3:var(--dx-text-faint);
  --panel:var(--dx-surface-card); --panel-2:var(--dx-surface-raised); --sunken:var(--dx-surface-sunken);
  --surface:var(--dx-surface-card); --surface-raised:var(--dx-surface-raised); --surface-sunken:var(--dx-surface-sunken);
  --bg:var(--dx-surface-base); --line-strong:var(--dx-border-strong);
  --accent-fill:var(--dx-accent); --on-accent:var(--dx-text-on-accent);
  --good:var(--dx-ok); --bad:var(--dx-danger); --warn:var(--dx-warn);
  --brand-navy:var(--dx-brand-navy); --brand-panel-hi:var(--dx-brand-panel-hi); --brand-panel-lo:var(--dx-brand-panel-lo);
  --brand-sky:var(--dx-brand-sky); --brand-mist:var(--dx-brand-mist); --on-brand:var(--dx-on-brand);
  --chart-1:var(--dx-chart-1); --chart-2:var(--dx-chart-2); --chart-forecast:var(--dx-chart-forecast);
  --font-sans:var(--dx-font);
}