/* =========================================================================
   ТОКЕНЫ ОФОРМЛЕНИЯ — единственный источник значений цвета, размера и ритма.
   Правило: в base.css / components.css / forms.css цветовых литералов нет.
   Стилевая тема форка переопределяет ТОЛЬКО переменные этого файла.

   Порядок подключения стилей на странице:
       fonts.css → tokens.css → base.css → components.css → forms.css → theme-*.css

   Соглашение об именах (по нему tools/contrast.py сам выводит проверяемые пары):
       --X-text / --X-muted / --X-subtle / --X-link  — цвет текста;
       --X-bg                                        — фон под этим текстом.
   Заводите компонент — заводите пару --X-text / --X-bg, и контраст проверится сам.
   ========================================================================= */

/* ---------------------------------------------------------------- ПАЛИТРА */
/* Примитивы. На страницах напрямую не используются: только через
   семантические токены ниже. Их же читает tools/build_og_image.py. */
:root {
  --p-brand-900: #081426;
  --p-brand-800: #0b1b33;
  --p-brand-700: #12315a;
  --p-brand-600: #1c4c8c;
  --p-brand-500: #2563a8;
  --p-brand-400: #3b7fd4;
  --p-brand-300: #7fb2f0;
  --p-brand-200: #c3d8ee;
  --p-brand-100: #deeaf9;
  --p-brand-50:  #eff4fc;

  --p-accent-700: #0c5c43;
  --p-accent-600: #0f7358;
  --p-accent-500: #12886a;
  --p-accent-400: #17a086;
  --p-accent-300: #7ee3be;
  --p-accent-100: #dcf2e9;

  --p-amber-800: #5a3800;
  --p-amber-700: #7a4e00;
  --p-amber-500: #b87400;
  --p-amber-300: #f5c978;
  --p-amber-100: #fcefd3;

  --p-red-700: #8e1c1c;
  --p-red-500: #c23434;
  --p-red-300: #f5a3a3;
  --p-red-100: #fbe2e2;

  --p-neutral-0:   #ffffff;
  --p-neutral-50:  #f6f8fb;
  --p-neutral-100: #edf1f6;
  --p-neutral-200: #e9edf3;
  --p-neutral-300: #cdd6e2;
  --p-neutral-400: #9aa5b5;
  --p-neutral-500: #5a6575;
  --p-neutral-600: #4e5968;
  --p-neutral-700: #38424f;
  --p-neutral-800: #1e293b;
  --p-neutral-900: #141a23;
  --p-neutral-950: #0f1622;
}

/* ------------------------------------------------- ТИПОГРАФИКА И РАЗМЕРЫ */
:root {
  --font-sans: "Carlito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  --fs-3xs: 0.75rem;    /* 12px — служебные подписи */
  --fs-2xs: 0.8125rem;  /* 13px — навигация, подписи таблиц */
  --fs-xs:  0.875rem;   /* 14px */
  --fs-sm:  0.9375rem;  /* 15px */
  --fs-md:  1rem;       /* 16px — базовый */
  --fs-lg:  1.125rem;   /* 18px — лид */
  --fs-xl:  1.375rem;   /* 22px — h3 */
  --fs-2xl: 1.75rem;    /* 28px — h2 */
  --fs-3xl: 2.25rem;    /* 36px — h1 */
  --fs-4xl: 2.75rem;    /* 44px — первый экран */

  --lh-tight: 1.2;
  --lh-heading: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.06em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --border-width: 1px;

  --container: 1180px;
  --container-narrow: 780px;
  --header-height: 68px;
  --header-height-compact: 56px;
  --tap-min: 44px;

  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-panel: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* Высота cookie-баннера. Ставится скриптом, пока баннер на экране:
     плавающие кнопки поднимаются над ним и ничего не перекрывают. */
  --banner-h: 0px;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ============================ СВЕТЛАЯ ТЕМА (значения по умолчанию) ======= */
:root {
  color-scheme: light;

  /* Общие подложки и общий текст.
     Каждый общий текстовый токен проверяется на каждой общей подложке. */
  --color-canvas: #f6f8fb;
  --color-canvas-sunken: #edf1f6;
  --color-surface: #ffffff;
  --color-surface-sunken: #e9edf3;

  --color-text: #141a23;
  --color-text-muted: #4e5968;
  --color-text-subtle: #5a6575;
  --color-text-link: #1c4c8c;
  --color-text-link-hover: #12315a;
  --color-text-on-brand: #ffffff;

  --color-brand: #1c4c8c;
  --color-brand-strong: #12315a;
  --color-accent: #0f7358;
  --color-danger: #8e1c1c;
  --color-warning: #7a4e00;

  --color-border: #d9e0ea;
  --color-border-strong: #5c718f;
  --color-focus: #1c4c8c;
  --color-selection-bg: #deeaf9;

  --shadow-sm: 0 1px 2px rgba(11, 27, 51, 0.08);
  --shadow-md: 0 4px 16px rgba(11, 27, 51, 0.1);
  --shadow-lg: 0 18px 46px rgba(11, 27, 51, 0.16);
  --shadow-focus: 0 0 0 3px rgba(28, 76, 140, 0.35);

  /* --- Шапка --- */
  --header-bg: #ffffff;
  --header-text: #141a23;
  --header-muted: #4e5968;
  --header-border: #dde4ee;

  /* --- Подвал: тёмная плашка в обеих темах --- */
  --footer-bg: #101827;
  --footer-text: #e9eef6;
  --footer-muted: #a9b6c8;
  --footer-link: #9ec6f5;
  --footer-border: #24304a;

  /* --- Первый экран --- */
  --hero-bg: linear-gradient(135deg, #0b1b33 0%, #12315a 55%, #1c4c8c 100%);
  --hero-text: #ffffff;
  --hero-muted: #c7d6ea;
  --hero-border: #2b4972;

  /* --- Тёмная секция-разделитель --- */
  --band-bg: #101b2e;
  --band-text: #e9eef6;
  --band-muted: #afbecf;

  /* --- Кнопки --- */
  --btn-primary-bg: #1c4c8c;
  --btn-primary-text: #ffffff;
  --btn-primary-bg-hover: #12315a;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #12315a;
  --btn-secondary-border: #7c90ae;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #1c4c8c;

  /* --- Статусные чипы --- */
  --chip-ok-bg: #dcf2e9;
  --chip-ok-text: #0c5c43;
  --chip-warn-bg: #fcefd3;
  --chip-warn-text: #7a4e00;
  --chip-info-bg: #deeaf9;
  --chip-info-text: #17457f;
  --chip-muted-bg: #e7ebf2;
  --chip-muted-text: #4a5566;
  --chip-danger-bg: #fbe2e2;
  --chip-danger-text: #8e1c1c;

  /* --- Акцентные блоки --- */
  --rule-bg: #eef3fb;
  --rule-text: #16283f;
  --rule-accent: #1c4c8c;
  --rule-warn-bg: #fdf3de;
  --rule-warn-text: #5a3800;
  --rule-warn-accent: #b87400;

  --info-bg: #eff2f7;
  --info-text: #38424f;
  --info-accent: #7d8ba0;

  /* --- Таблицы --- */
  --table-head-bg: #edf1f7;
  --table-head-text: #29323f;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f7f9fc;
  --table-border: #dfe5ee;

  /* --- Поля форм --- */
  --field-bg: #ffffff;
  --field-text: #141a23;
  --field-label: #38424f;
  --field-subtle: #5a6575;
  --field-border: #7c90ae;
  --field-invalid: #8e1c1c;

  /* --- Тултип, поиск, служебные --- */
  --tip-bg: #1b2434;
  --tip-text: #f1f5fa;

  --search-bg: #ffffff;
  --search-text: #141a23;
  --search-subtle: #5a6575;

  --banner-bg: #101827;
  --banner-text: #e9eef6;
  --banner-muted: #b3c0d1;

  --tile-bg: #ffffff;
  --tile-text: #38424f;

  --code-bg: #edf1f7;
  --code-text: #1f3a5f;

  --totop-bg: #12315a;
  --totop-text: #ffffff;

  --progress-bg: #dde4ee;
  --progress-fill: #1c4c8c;

  /* --- Схемы (инлайн-SVG) --- */
  --dgm-node-bg: #ffffff;
  --dgm-node-text: #141a23;
  --dgm-node-border: #7c90ae;
  --dgm-accent-bg: #deeaf9;
  --dgm-accent-text: #12315a;
  --dgm-line: #7b8ba1;
  --dgm-label: #4e5968;
}

/* ================================== ТЁМНАЯ ТЕМА ========================= */
/* Тема ставится атрибутом data-theme на <html> ДО отрисовки (скрипт в <head>).
   Медиазапрос prefers-color-scheme здесь намеренно не используется: выбор
   системы разбирает тот же скрипт, а CSS остаётся с одним источником правды. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #0f1622;
  --color-canvas-sunken: #0b111b;
  --color-surface: #182131;
  --color-surface-sunken: #1e293b;

  --color-text: #e8edf5;
  --color-text-muted: #b3becd;
  --color-text-subtle: #93a0b2;
  --color-text-link: #7fb2f0;
  --color-text-link-hover: #a6cbf7;
  --color-text-on-brand: #ffffff;

  --color-brand: #3b7fd4;
  --color-brand-strong: #7fb2f0;
  --color-accent: #17a086;
  --color-danger: #f5a3a3;
  --color-warning: #f5c978;

  --color-border: #2a3547;
  --color-border-strong: #7b90b3;
  --color-focus: #7fb2f0;
  --color-selection-bg: #1d3a5f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(127, 178, 240, 0.45);

  --header-bg: #121a28;
  --header-text: #e8edf5;
  --header-muted: #b3becd;
  --header-border: #2a3547;

  --footer-bg: #0b111b;
  --footer-text: #e9eef6;
  --footer-muted: #a9b6c8;
  --footer-link: #9ec6f5;
  --footer-border: #212c40;

  --hero-bg: linear-gradient(135deg, #081426 0%, #0e2444 55%, #12315a 100%);
  --hero-text: #ffffff;
  --hero-muted: #c7d6ea;
  --hero-border: #24405f;

  --band-bg: #0b111b;
  --band-text: #e9eef6;
  --band-muted: #afbecf;

  --btn-primary-bg: #2e6fc2;
  --btn-primary-text: #ffffff;
  --btn-primary-bg-hover: #3b7fd4;
  --btn-secondary-bg: #1e293b;
  --btn-secondary-text: #cfe0f5;
  --btn-secondary-border: #5e7496;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #7fb2f0;

  --chip-ok-bg: #10352a;
  --chip-ok-text: #7ee3be;
  --chip-warn-bg: #3a2a08;
  --chip-warn-text: #f5c978;
  --chip-info-bg: #10243f;
  --chip-info-text: #9cc6f7;
  --chip-muted-bg: #1c2534;
  --chip-muted-text: #afbaca;
  --chip-danger-bg: #3a1616;
  --chip-danger-text: #f5a3a3;

  --rule-bg: #152033;
  --rule-text: #dde7f5;
  --rule-accent: #3b7fd4;
  --rule-warn-bg: #33260a;
  --rule-warn-text: #f3d08a;
  --rule-warn-accent: #b87400;

  --info-bg: #161e2c;
  --info-text: #c3cedd;
  --info-accent: #5e6b7d;

  --table-head-bg: #1a2434;
  --table-head-text: #cbd6e4;
  --table-row-bg: #182131;
  --table-row-alt-bg: #141d2b;
  --table-border: #2a3547;

  --field-bg: #121a27;
  --field-text: #e8edf5;
  --field-label: #c3cedd;
  --field-subtle: #93a0b2;
  --field-border: #5e7496;
  --field-invalid: #f5a3a3;

  --tip-bg: #1b2434;
  --tip-text: #f1f5fa;

  --search-bg: #182131;
  --search-text: #e8edf5;
  --search-subtle: #93a0b2;

  --banner-bg: #101827;
  --banner-text: #e9eef6;
  --banner-muted: #b3c0d1;

  --tile-bg: #182131;
  --tile-text: #c3cedd;

  --code-bg: #101827;
  --code-text: #b7cbe6;

  --totop-bg: #2e6fc2;
  --totop-text: #ffffff;

  --progress-bg: #2a3547;
  --progress-fill: #3b7fd4;

  --dgm-node-bg: #182131;
  --dgm-node-text: #e8edf5;
  --dgm-node-border: #5e7496;
  --dgm-accent-bg: #10243f;
  --dgm-accent-text: #9cc6f7;
  --dgm-line: #6b7b93;
  --dgm-label: #b3becd;
}