/* ==========================================================================
   ISRA Ланселот: Оценка Риска Информационной Безопасности
   tokens.css — ЕДИНСТВЕННЫЙ источник значений оформления.

   Правила, которые нельзя нарушать:
   1. Ни в base.css, ни в components.css, ни на страницах не должно быть
      литеральных цветов. Только var(--…). В фазе 5 сайт форкается в стилевые
      темы, и тема переопределяет ЭТОТ файл, а не воюет с жёстко прописанным.
   2. Светлая тема живёт в :root, тёмная — в :root[data-theme="dark"].
      Системная настройка разрешается скриптом (theme boot в <head>), а не
      медиазапросом: так значение темы всегда явно стоит атрибутом на <html>,
      и его одинаково видят браузер, tools/contrast.py и стилевые форки.
   3. Соглашение об именах — контракт с tools/contrast.py:
        --X-text / --X-muted / --X-label / --X-link  — цвет текста;
        --X-bg                                        — фон под этим текстом.
      Пара с общим префиксом X проверяется автоматически в обеих темах.
      Заводите новый компонент с цветным фоном — заводите ОБА токена.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- */
  /* 1. ПРИМИТИВЫ. Сырая палитра. Напрямую в разметке не используются. */
  /* ---------------------------------------------------------------- */

  /* Нейтральный холодный ряд */
  --p-neutral-0:   #ffffff;
  --p-neutral-25:  #f8fafc;
  --p-neutral-50:  #f2f5f8;
  --p-neutral-100: #e7ecf2;
  --p-neutral-200: #d6dee8;
  --p-neutral-300: #b7c4d3;
  --p-neutral-400: #8b9cb0;
  --p-neutral-500: #6b7c92;
  --p-neutral-600: #556880;
  --p-neutral-700: #42546a;
  --p-neutral-800: #2a3a4d;
  --p-neutral-900: #111c29;
  --p-neutral-950: #0c141e;
  --p-neutral-1000:#080f17;

  /* Фирменный синий — «Ланселот» */
  --p-brand-50:  #f0f6fc;
  --p-brand-100: #ddebf9;
  --p-brand-200: #a9d0f5;
  --p-brand-300: #77b6ef;
  --p-brand-500: #2a79c8;
  --p-brand-600: #1a5fa8;
  --p-brand-700: #134a87;
  --p-brand-800: #12314f;
  --p-brand-900: #0b2138;

  /* Акцент — бирюзовый. Второй голос: методика, расчёт, формула. */
  --p-teal-100: #d5f0ed;
  --p-teal-400: #3fc0b7;
  --p-teal-600: #0d766e;
  --p-teal-700: #0a5d57;

  /* Семафор уровней риска. Одни и те же три цвета
     обслуживают High / Medium / Low и статусные чипы. */
  --p-red-100:   #fbe2e0;
  --p-red-300:   #ffa9a2;
  --p-red-700:   #8a1710;
  --p-red-900:   #3c1512;
  --p-amber-100: #fbebcd;
  --p-amber-300: #f3c97a;
  --p-amber-800: #6b4200;
  --p-amber-900: #3a2a0b;
  --p-green-100: #dcf0e2;
  --p-green-300: #8fe3ae;
  --p-green-800: #0c4f27;
  --p-green-900: #12321f;

  /* Подсветка изменённого значения.
     Единственный цветовой код, найденный в исходниках ISRA:
     background-color #fff3cd — подсветка изменённого поля.
     grounding.json → confidence_boundaries.declared_but_unverifiable
                      .ui_appearance.only_hard_ui_facts */
  --p-highlight-100: #fff3cd;
  --p-highlight-800: #4a3600;
  --p-highlight-900: #3f3208;

  /* ---------------------------------------------------------------- */
  /* 2. СЕМАНТИКА. Этим пользуются стили.                             */
  /* ---------------------------------------------------------------- */

  /* Поверхности. Имена подчиняются --color-(canvas|surface)*  */
  --color-canvas:        var(--p-neutral-50);
  --color-canvas-sunken: var(--p-neutral-100);
  --color-surface:       var(--p-neutral-0);
  --color-surface-alt:   var(--p-neutral-25);

  /* Текст. Имена подчиняются --color-text*                     */
  --color-text:          var(--p-neutral-900);
  --color-text-muted:    var(--p-neutral-700);
  --color-text-subtle:   var(--p-neutral-600);
  --color-text-link:     #144e86;
  --color-text-on-brand: var(--p-neutral-0);   /* исключено из проверки пар */

  /* Линии */
  --color-border:        var(--p-neutral-200);
  --color-border-strong: var(--p-neutral-300);
  --color-hairline:      #e4eaf1;

  /* Действие и акцент */
  --color-action:        var(--p-brand-700);
  --color-action-hover:  var(--p-brand-800);
  --color-accent:        var(--p-teal-600);
  --color-focus:         var(--p-brand-600);
  --color-selection-bg:  var(--p-brand-100);

  /* Семафор — заливки для полос, точек и рамок */
  --color-risk-high:   var(--p-red-700);
  --color-risk-medium: var(--p-amber-800);
  --color-risk-low:    var(--p-green-800);

  /* ---------------------------------------------------------------- */
  /* 3. КОМПОНЕНТНЫЕ ПАРЫ «текст на фоне».                            */
  /*    Каждая проверяется tools/contrast.py в обеих темах.           */
  /* ---------------------------------------------------------------- */

  /* Шапка */
  --header-bg:    var(--p-neutral-0);
  --header-text:  #16212f;
  --header-muted: #4a5c72;

  /* Подвал */
  --footer-bg:    var(--p-neutral-900);
  --footer-text:  #dde6f0;
  --footer-muted: #a3b4c8;
  --footer-link:  #9fc8ee;

  /* Первый экран и тёмные полосы-разделители */
  --hero-bg:    #12283f;
  --hero-text:  #eaf1f9;
  --hero-muted: #b4c7dc;

  /* Кнопки */
  --btn-primary-bg:     var(--p-brand-700);
  --btn-primary-text:   var(--p-neutral-0);
  --btn-secondary-bg:   var(--p-neutral-0);
  --btn-secondary-text: #123f73;

  /* Статусные чипы */
  --chip-ok-bg:      var(--p-green-100);
  --chip-ok-text:    var(--p-green-800);
  --chip-warn-bg:    var(--p-amber-100);
  --chip-warn-text:  var(--p-amber-800);
  --chip-risk-bg:    var(--p-red-100);
  --chip-risk-text:  var(--p-red-700);
  --chip-info-bg:    #dceef7;
  --chip-info-text:  #0b4f6b;
  --chip-muted-bg:   #e4e9ef;
  --chip-muted-text: #3b4a5c;

  /* Акцентный блок правила и его предупреждающий вариант */
  --rule-bg:        #e3edf7;
  --rule-text:      #14304f;
  --rule-warn-bg:   var(--p-amber-100);
  --rule-warn-text: var(--p-amber-800);

  /* Информационная плашка — тише, чем правило */
  --info-bg:   #edf1f5;
  --info-text: #33414f;

  /* Код, идентификаторы, формулы */
  --code-bg:   #eef2f6;
  --code-text: #1b2b3d;

  /* Тултип — намеренно инвертирован относительно темы */
  --tip-bg:   #1a2836;
  --tip-text: #f2f6fa;

  /* Метка-эйбрау над заголовком секции */
  --tag-bg:   #e1eef8;
  --tag-text: #0e4c74;

  /* Подсветка изменённого значения */
  --mark-bg:   var(--p-highlight-100);
  --mark-text: var(--p-highlight-800);

  /* Шапка таблицы */
  --thead-bg:   #eaeff5;
  --thead-text: #22303f;

  /* Поиск по сайту */
  --search-bg:    var(--p-neutral-0);
  --search-text:  var(--p-neutral-900);
  --search-muted: var(--p-neutral-600);

  /* Числовая плитка */
  --stat-bg:    var(--p-neutral-0);
  --stat-text:  var(--p-neutral-900);
  --stat-label: var(--p-neutral-600);

  /* ---------------------------------------------------------------- */
  /* 4. НЕЦВЕТОВЫЕ ТОКЕНЫ                                             */
  /* ---------------------------------------------------------------- */

  /* Гарнитуры */
  --font-sans: "Carlito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Liberation Mono", "Consolas", "DejaVu Sans Mono", monospace;

  /* Размерный ряд. Плавный, привязан к ширине окна. */
  --fs-3xs:  0.6875rem;  /* 11px — служебные подписи        */
  --fs-2xs:  0.75rem;    /* 12px — метки, data-label        */
  --fs-xs:   0.8125rem;  /* 13px — таблицы, чипы            */
  --fs-sm:   0.9375rem;  /* 15px — вторичный текст          */
  --fs-md:   1.0625rem;  /* 17px — основной текст           */
  --fs-lg:   clamp(1.125rem, 0.35vw + 1.05rem, 1.3125rem);
  --fs-xl:   clamp(1.3125rem, 0.6vw + 1.18rem, 1.625rem);
  --fs-2xl:  clamp(1.5rem, 1.1vw + 1.28rem, 2.125rem);
  --fs-3xl:  clamp(1.875rem, 2vw + 1.4rem, 2.875rem);
  --fs-4xl:  clamp(2.25rem, 3.2vw + 1.5rem, 3.75rem);

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.72;

  --ls-tight:  -0.015em;
  --ls-normal: 0;
  --ls-wide:   0.02em;
  --ls-caps:   0.09em;

  /* Ритм. Шаг 4px. */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5.5rem;
  --sp-11: 7rem;

  /* Ширины */
  --w-page:  1180px;   /* контейнер                       */
  --w-wide:  1360px;   /* широкий контейнер под таблицы   */
  --w-prose: 68ch;     /* комфортная строка текста        */

  /* Скругления */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Тени. Мягкие и холодные: интерфейс не должен «пузыриться». */
  --shadow-xs: 0 1px 2px rgba(15, 30, 50, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 30, 50, 0.08), 0 1px 2px rgba(15, 30, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 30, 50, 0.10), 0 1px 3px rgba(15, 30, 50, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 30, 50, 0.14), 0 2px 8px rgba(15, 30, 50, 0.06);

  /* Обводка фокуса */
  --focus-width:  2px;
  --focus-offset: 2px;

  /* Тайминги */
  --t-fast: 120ms;
  --t-mid:  200ms;
  --t-slow: 340ms;
  --ease:   cubic-bezier(0.2, 0.6, 0.25, 1);

  /* Слои */
  --z-base:      1;
  --z-sticky:    50;
  --z-header:    100;
  --z-nav-panel: 110;
  --z-float:     120;
  --z-tip:       200;

  /* Геометрия каркаса. Читается и из JS (offset для якорей). */
  --header-h:         76px;
  --header-h-compact: 60px;
  --ctabar-h:         0px;

  /* Цветовая схема системных элементов управления */
  color-scheme: light;
}

/* ========================================================================== */
/* ТЁМНАЯ ТЕМА                                                                */
/* Переопределяются ТОЛЬКО семантические и компонентные токены.               */
/* Примитивы остаются теми же — иначе форк темы будет невозможно отследить.   */
/* ========================================================================== */

:root[data-theme="dark"] {
  --color-canvas:        var(--p-neutral-950);
  --color-canvas-sunken: var(--p-neutral-1000);
  --color-surface:       #141e2b;
  --color-surface-alt:   #1b2735;

  --color-text:          #e8eef6;
  --color-text-muted:    #afc0d2;
  --color-text-subtle:   #9aaec4;
  --color-text-link:     #79b8f0;
  --color-text-on-brand: #07121e;

  --color-border:        #2b3949;
  --color-border-strong: #3e5065;
  --color-hairline:      #1f2b3a;

  --color-action:        var(--p-brand-300);
  --color-action-hover:  var(--p-brand-200);
  --color-accent:        var(--p-teal-400);
  --color-focus:         var(--p-brand-300);
  --color-selection-bg:  #1c3a5c;

  --color-risk-high:   var(--p-red-300);
  --color-risk-medium: var(--p-amber-300);
  --color-risk-low:    var(--p-green-300);

  --header-bg:    #101a26;
  --header-text:  #e8eef6;
  --header-muted: #a2b5c9;

  --footer-bg:    var(--p-neutral-1000);
  --footer-text:  #dde6f0;
  --footer-muted: #9aaec4;
  --footer-link:  #79b8f0;

  --hero-bg:    #0f1b28;
  --hero-text:  #e9f0f8;
  --hero-muted: #a8bcd2;

  --btn-primary-bg:     var(--p-brand-300);
  --btn-primary-text:   #07121e;
  --btn-secondary-bg:   #1b2735;
  --btn-secondary-text: #bbd8f5;

  --chip-ok-bg:      var(--p-green-900);
  --chip-ok-text:    var(--p-green-300);
  --chip-warn-bg:    var(--p-amber-900);
  --chip-warn-text:  var(--p-amber-300);
  --chip-risk-bg:    var(--p-red-900);
  --chip-risk-text:  var(--p-red-300);
  --chip-info-bg:    #0e2c3a;
  --chip-info-text:  #93d3ee;
  --chip-muted-bg:   #232f3e;
  --chip-muted-text: #c3d0de;

  --rule-bg:        #14263a;
  --rule-text:      #bbd6f2;
  --rule-warn-bg:   var(--p-amber-900);
  --rule-warn-text: var(--p-amber-300);

  --info-bg:   #18222f;
  --info-text: #c6d3e1;

  --code-bg:   #101a26;
  --code-text: #d5e2f0;

  --tip-bg:   #dce6f1;
  --tip-text: #0e1620;

  --tag-bg:   #12283c;
  --tag-text: #93c6ee;

  --mark-bg:   var(--p-highlight-900);
  --mark-text: var(--p-highlight-100);

  --thead-bg:   #1a2534;
  --thead-text: #d3dfec;

  --search-bg:    #141e2b;
  --search-text:  #e8eef6;
  --search-muted: #9aaec4;

  --stat-bg:    #141e2b;
  --stat-text:  #e8eef6;
  --stat-label: #9aaec4;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.68), 0 2px 8px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}