/* Токены направления «Пульт» (SPEC 01.10.2026): светлый деловой финсервис — белые карточки
   на светло-сером холсте, Inter с табличными цифрами, один акцент — синий. Единственное
   место, где живут сырые цвета и размеры: остальной CSS берёт только var(). Слои: сырьё →
   смысл (день / ночь) → шкалы → компоненты → совместимость со старыми разделами. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- сырьё ------------------------------------------------------------------------------ */

:root {
  --gray-0: #FFFFFF;
  --gray-25: #F7F8FA;
  --gray-50: #F1F3F6;
  --gray-100: #E7EAEE;
  --gray-200: #D5DAE1;
  --gray-400: #9AA3AF;
  --gray-500: #6B7480;
  --gray-700: #3D4651;
  --gray-900: #141A21;

  --blue-50: #EEF4FF;
  --blue-100: #DCE8FF;
  --blue-500: #2F6FEB;
  --blue-600: #1F5BD6;
  --blue-700: #1A4BB0;

  --green-50: #EAF7EF;
  --green-600: #1E9E57;
  --green-700: #16794A;

  --red-50: #FDEEEE;
  --red-600: #D93A3A;
  --red-700: #B42323;

  --amber-50: #FFF6E5;
  --amber-500: #E59A0B;
  --amber-700: #9A5B00;

  --slate-300: #B8C2D0;

  /* ночь */
  --night-bg: #0F1318;
  --night-surface: #161B22;
  --night-surface-2: #1C222B;
  --night-border: #262D36;
  --night-border-strong: #343D49;
  --night-text: #E8ECF1;
  --night-text-2: #9AA4B2;
  --night-text-3: #6E7886;
  --night-blue: #5B8DEF;
  --night-blue-hover: #7AA3F3;
  --night-blue-soft: #1A2740;
  --night-blue-soft-2: #233556;
  --night-green: #3CC57A;
  --night-green-soft: #12291D;
  --night-red: #F06A6A;
  --night-red-soft: #2E1719;
  --night-amber: #F2B441;
  --night-amber-soft: #2D2312;
  --night-slate: #4F5B6C;

  --shadow-color: rgba(16, 24, 40, .06);
  --scrim-color: rgba(16, 24, 40, .32);
  --night-scrim-color: rgba(0, 0, 0, .5);
}

/* --- смысл: день ------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --bg: var(--gray-25);
  --surface: var(--gray-0);
  --surface-2: var(--gray-50);
  --border: var(--gray-100);
  --border-strong: var(--gray-200);
  --text: var(--gray-900);
  --text-2: var(--gray-500);
  --text-3: var(--gray-400);
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-text: var(--blue-600);          /* ссылка и текущий пункт: 4,5:1 на белом */
  --accent-soft: var(--blue-50);
  --accent-soft-2: var(--blue-100);
  --accent-ink: var(--gray-0);
  --up: var(--green-700);
  --up-soft: var(--green-50);
  --up-mark: var(--green-600);
  --down: var(--red-700);
  --down-soft: var(--red-50);
  --down-mark: var(--red-600);
  --warn: var(--amber-700);
  --warn-soft: var(--amber-50);
  --warn-mark: var(--amber-500);
  --focus: var(--blue-500);
  --scrim: var(--scrim-color);
  --shadow-1: 0 1px 2px var(--shadow-color);

  --chart-1: var(--blue-500);
  --chart-2: var(--slate-300);
  --chart-in: var(--green-600);
  --chart-out: var(--red-600);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-500);
  --chart-track: var(--gray-50);
}

/* --- смысл: ночь ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: var(--night-bg);
    --surface: var(--night-surface);
    --surface-2: var(--night-surface-2);
    --border: var(--night-border);
    --border-strong: var(--night-border-strong);
    --text: var(--night-text);
    --text-2: var(--night-text-2);
    --text-3: var(--night-text-3);
    --accent: var(--night-blue);
    --accent-hover: var(--night-blue-hover);
    --accent-text: var(--night-blue-hover);
    --accent-soft: var(--night-blue-soft);
    --accent-soft-2: var(--night-blue-soft-2);
    --accent-ink: var(--night-bg);
    --up: var(--night-green);
    --up-soft: var(--night-green-soft);
    --up-mark: var(--night-green);
    --down: var(--night-red);
    --down-soft: var(--night-red-soft);
    --down-mark: var(--night-red);
    --warn: var(--night-amber);
    --warn-soft: var(--night-amber-soft);
    --warn-mark: var(--night-amber);
    --focus: var(--night-blue);
    --scrim: var(--night-scrim-color);

    --chart-1: var(--night-blue);
    --chart-2: var(--night-slate);
    --chart-in: var(--night-green);
    --chart-out: var(--night-red);
    --chart-grid: var(--night-border);
    --chart-axis: var(--night-text-2);
    --chart-track: var(--night-surface-2);
  }
}

/* --- шкалы ------------------------------------------------------------------------------- */

:root {
  /* отступы: шаг 4 px */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* кегль */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-1: 1;
  --lh-tight: 1.2;
  --lh-text: 1.45;
  --lh-read: 1.5;

  --ls-tight: -0.01em;
  --ls-display: -0.02em;

  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --num-features: "tnum" 1, "cv11" 1;

  /* геометрия */
  --hairline: 1px;
  --rule-thick: 2px;
  --ring: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-round: 50%;
  --r-pill: 999px;
  --tap: 44px;
  --control: 40px;
  --control-sm: 32px;
  --tag-h: 22px;
  --tab-height: 60px;
  --sidebar: 248px;
  --container: 1280px;
  --container-narrow: 440px;
  --login-card: 400px;
  --readable: 64ch;
  --dot: 8px;
  --q: 20px;
  --logo: 28px;
  --logo-large: 40px;
  --side-column: 360px;
  --field-min: 120px;
  --name-min: 144px;
  --chg-width: 112px;
  --table-min: 860px;
  --disabled-opacity: .5;

  /* графики */
  --chart-h-sm: 120px;
  --chart-h-md: 220px;
  --chart-h-lg: 280px;
  --spark-h: 36px;
  --hbar-h: 8px;
  --progress-h: 10px;
  --fill-soft: .08;
  --fill-area: .1;
  --line-w: 2px;
  --line-thin: 1.5px;
  --dash: 5 4;
  --zero-opacity: .5;
  --hover-opacity: .85;

  --dur-fast: 120ms;
  --dur-base: 180ms;
}

/* --- компоненты --------------------------------------------------------------------------- */

:root {
  --btn-bg: var(--surface);
  --btn-ink: var(--text);
  --btn-rule: var(--border-strong);
  --btn-main-bg: var(--accent);
  --btn-main-ink: var(--accent-ink);
  --field-rule: var(--border-strong);
  --field-ink: var(--text);
  --field-bg: var(--surface);
  --nav-ink: var(--text-2);
  --nav-ink-current: var(--accent-text);
  --nav-bg-current: var(--accent-soft);
  --tab-bg: var(--surface);
  --tab-ink: var(--text-2);
  --tab-ink-current: var(--accent-text);
  --dot-ok: var(--up-mark);
  --dot-est: var(--warn-mark);
  --dot-none: var(--text-3);
}

/* --- совместимость, удалить после переделки разделов ---------------------------------------
   Старые имена «Гроссбуха», которые ещё читают balance.css, bank.css, recon.css, rubric.css,
   admin.css и data.css. Каждое ведёт на новый смысл; бумаги, засечек, маркера и отточий
   больше нет. */

:root {
  --paper: var(--surface);
  --paper-2: var(--surface-2);
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --ink-soft-2: var(--text-2);
  --rule: var(--border);
  --rule-strong: var(--border-strong);
  --marker: transparent;
  --marker-ink: var(--text);
  --marker-top: 100%;
  --marker-bottom: 100%;
  --attn: var(--warn);
  --ff-serif: var(--ff-sans);
  --r-field: var(--r-sm);
  --r-card: var(--r-lg);
  --lead-ink: transparent;
  --lead-min: var(--space-4);
  --lead-opacity: 0;
  --tab-scrim: var(--scrim);
  --q-rule: var(--border-strong);
  --q-ink: var(--text-2);
  --q-open-bg: var(--accent);
  --q-open-ink: var(--accent-ink);
  --btn-quiet-ink: var(--text-2);
  --bar: var(--rule-thick);
  --lh-snug: 1.25;
  --lh-num: 1.3;
  --lh-16: 16px;
  --lh-18: 18px;
  --lh-22: 22px;
  --lh-26: 26px;
  --lh-32: 32px;
  --lh-44: 44px;
  --fs-17: 16px;
  --fs-19: 18px;
  --fs-22: 20px;
  --fs-30: 28px;
  --fs-44: 32px;
  --fs-56: 32px;
  --fs-96: 40px;
  --fs-112: 40px;
}