/* ============================================================
   SEO-GEO - Дизайн-токены клиентских продукт-экранов
   Направление: «Чистый документ» (light, документная типографика,
   воздух, минимум обвеса, цвет точечно).
   Фаза 2 дизайна клиентского интерфейса.
   План: plans/2026-06-17-client-ui-design.md
   Решение: decisions/architecture-decisions.md (2026-06-17)

   ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ. Подключается во всех клиентских экранах
   (Фазы 3-4), styleguide.html и позже в index.html.
   Не хардкодить цвета/размеры в компонентах - только через эти токены.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     ЦВЕТ - роли зелёного разведены (долг Фазы 1 закрыт здесь)

     Фирменный зелёный akrotova.ru = #a3e635 (яркий жёлто-зелёный
     лайм). На белом как ТЕКСТ нечитаем -> используется только как
     ЗАЛИВКА/АКЦЕНТ с тёмным текстом, точечно.
     Статусный «ОК» = холодный лесной зелёный, ДРУГОЙ оттенок,
     чтобы клиент не путал «бренд/действие» и «статус ОК».
     -------------------------------------------------------- */

  /* Фирменный бренд-акцент (действие / CTA / активное / фокус).
     Только заливка под тёмный текст или тонкая акцентная черта. */
  --brand:            #a3e635;  /* akrotova.ru lime - фирменный акцент */
  --brand-strong:     #92d320;  /* hover/active фирменной заливки */
  --brand-soft:       #f2fbdd;  /* мягкий фон бренд-зоны (плашки, выделение) */
  --brand-border:     #d6ee9b;  /* граница бренд-зоны на светлом */
  --on-brand:         #1a2e05;  /* текст НА лаймовой заливке (тёмный, контраст AA) */

  /* Второй фирменный цвет - глубокий тёплый оливковый.
     Крупные акцентные плоскости (шапка героя, финальный баннер) со светлым текстом.
     Лайм остаётся точечным акцентом/кнопкой поверх. */
  --brand-deep:            #2f3d1a;  /* оливковая заливка */
  --on-brand-deep:         #f3f6ea;  /* основной светлый текст на оливковом (AA) */
  --on-brand-deep-muted:   #cfd6c2;  /* вторичный светлый текст на оливковом (AA) */
  --brand-deep-badge-bg:   rgba(163,230,53,0.16); /* подложка бейджа на оливковом */
  --brand-deep-badge-text: #cde89a;  /* текст бейджа на оливковом */
  --brand-deep-badge-border: rgba(163,230,53,0.40);

  /* Бренд-акцент как ТЕКСТ/ССЫЛКА на белом (затемнённый лайм - олива).
     Тот же фирменный оттенок, но контраст на белом проходит. */
  --accent-ink:       #3f6212;  /* ссылки, «шаг N», интерактивный текст */
  --accent-ink-hover: #2b4509;  /* hover ссылки */

  /* Статус-цвета (светофор). OK = ХОЛОДНЫЙ лесной, не лайм. */
  --ok:               #15803d;  /* статус ОК - текст/иконка на белом */
  --ok-text:          #166534;  /* текст ОК на мягком фоне */
  --ok-soft:          #e7f5ec;  /* мягкий фон ОК (холодный зелёный) */
  --ok-border:        #16a34a;  /* левая черта/обводка ОК */

  --warn:             #b45309;  /* статус «важно/внимание» - текст на белом */
  --warn-text:        #92400e;  /* текст на мягком фоне */
  --warn-soft:        #fef3c7;  /* мягкий жёлтый фон */
  --warn-border:      #f59e0b;  /* левая черта/обводка */

  --crit:             #b42318;  /* статус «критично» - текст на белом */
  --crit-text:        #912018;  /* текст на мягком фоне */
  --crit-soft:        #fee4e2;  /* мягкий красный фон */
  --crit-border:      #e03131;  /* левая черта/обводка */

  /* Доп. severity для плана работ (между crit и warn) */
  --high:             #c2410c;  /* «высокий» приоритет (тёплый оранжевый) */

  /* Нейтральный «инфо / проверено вручную» - СПОКОЙНЫЙ сланец,
     намеренно не синий и не зелёный, чтобы не плодить акценты. */
  --info-text:        #475569;
  --info-soft:        #eef1f5;
  --info-border:      #cbd5e1;

  /* --------------------------------------------------------
     НЕЙТРАЛИ - тёплая «бумага» (stone), документный тон
     -------------------------------------------------------- */
  --bg:               #faf9f6;  /* фон страницы - тёплая бумага */
  --surface:          #ffffff;  /* карточки/панели */
  --surface-sunken:   #f6f5f1;  /* вставки: цитаты, код, мягкие блоки */
  --surface-accent:   #fbfcf6;  /* лёгкая бренд-подложка панелей */

  --border:           #e8e6e0;  /* hairline-граница */
  --border-strong:    #d8d5cd;  /* видимая граница (таблицы, инпут) */

  --text:             #1c1b18;  /* основной текст (тёплый near-black) */
  --text-heading:     #15140f;  /* заголовки */
  --text-secondary:   #57534e;  /* вторичный текст */
  --text-muted:       #6f6b64;  /* приглушённый (подписи, дисклеймер) - AA на белом и --surface-sunken */
  --text-on-dark:     #faf9f5;  /* текст на тёмном (редко) */

  --focus-ring:       #6b8f1f;  /* кольцо фокуса (затемнённый лайм, видимый) */

  /* --------------------------------------------------------
     ТИПОГРАФИКА
     Шрифты с засечками НЕ используем. Один гротеск на всё.
     Заголовки и текст/UI/таблицы - Golos Text (sans, RU-дизайн,
     Cyrillic); заголовки отличаются весом и трекингом, не гарнитурой.
     Моноширинный - для rule_id и технических меток.
     Фолбэки - системные, деградирует без сети.
     -------------------------------------------------------- */
  --font-display: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  /* Шкала размеров (документная, сдержанная) */
  --fs-display: 2.25rem;  /* 36 - титул отчёта */
  --fs-price:   2rem;     /* 32 - крупная цена в тарифной карточке */
  --fs-h1:      1.75rem;  /* 28 */
  --fs-h2:      1.375rem; /* 22 */
  --fs-h3:      1.125rem; /* 18 */
  --fs-lead:    1.0625rem;/* 17 - вводный абзац */
  --fs-body:    1rem;     /* 16 - база */
  --fs-sm:      0.875rem; /* 14 - вторичный */
  --fs-xs:      0.8125rem;/* 13 - мелкий */
  --fs-2xs:     0.72rem;  /* ~11.5 - метки/капс */

  --lh-tight:   1.25;     /* заголовки */
  --lh-snug:    1.45;     /* плотные блоки/таблицы */
  --lh-body:    1.62;     /* основной текст */

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

  --tracking-label: 0.04em; /* для UPPERCASE-меток */

  /* --------------------------------------------------------
     ОТСТУПЫ (шаг ~4/8)
     -------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --------------------------------------------------------
     РАДИУСЫ (документ, не «пузырьки»)
     -------------------------------------------------------- */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-pill:999px;

  /* --------------------------------------------------------
     ИКОНКИ - служебные размеры (без новых цветов; цвет иконок
     наследуется через currentColor от контекста).
     -------------------------------------------------------- */
  --icon-chip: 30px;  /* сторона квадратной плашки-иконки .icon-chip */
  --icon-sm:   18px;  /* иконка в плашке / строке */
  --icon-xs:   16px;  /* иконка в кнопке / кикере */

  /* --------------------------------------------------------
     ТЕНИ - очень мягкие; разделение через границы, не «парение»
     -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(28,27,24,.05);
  --shadow:    0 1px 3px rgba(28,27,24,.07), 0 1px 2px rgba(28,27,24,.04);

  /* --------------------------------------------------------
     СЕТКА / РАЗМЕРЫ
     -------------------------------------------------------- */
  --content-max: 820px;  /* документная колонка */
  --content-wide: 1080px;/* широкий блок (витрина пакетов) - шире документной колонки */
  --content-pad: 24px;   /* боковые поля контента */

  /* Переходы */
  --transition: 0.15s ease;
}