/* ═══════════════════════════════════════════════════════════════════
   ФактЧек — единая тема.
   Подключается на всех страницах ПЕРЕД их собственными стилями.
   Здесь: цвета, шрифты, базовые стили и общие компоненты (кнопки, бренд).
   Правило: новый цвет или радиус сначала заводим здесь, а не в странице.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Основа ── */
  --ink:#14161b;          /* основной текст, тёмные блоки */
  --ink2:#565d6b;         /* второстепенный текст */
  --ink3:#667085;         /* подписи (контраст ≥ 4.5:1 и на белом, и на --paper) */
  --paper:#f3f4f7;        /* фон страницы */
  --paper2:#eceef3;
  --card:#fff;            /* карточки */
  --line:rgba(20,22,27,.09);
  --line2:rgba(20,22,27,.15);

  /* ── Бренд: оранжевый. Три роли, других оранжевых в проекте нет ── */
  --or:#ff6b1a;           /* заливки и кнопки (текст на них — тёмный --ink) */
  --or-d:#f25a08;         /* hover заливки */
  --or-t:#c2410c;         /* оранжевый ТЕКСТ и иконки на светлом фоне (контраст 5:1) */

  /* ── Цветные плашки: фон / цвет текста на этом фоне ── */
  --mint:#d5f6e3;   --mint-i:#137a47;
  --butter:#ffefb6; --butter-i:#8a5d00;
  --rose:#ffe1db;   --rose-i:#c23a29;
  --lilac:#e7e1ff;  --lilac-i:#5440cf;
  --sky:#dbeeff;    --sky-i:#1c5fa8;
  --peach:#ffe6d5;

  /* ── Светофор: точки, кольца, заливки (не для текста на светлом фоне) ── */
  --sig-g:#1fa463;
  --sig-y:#e2a400;
  --sig-r:#e5484d;

  /* ── Шрифты и анимация ── */
  --font:'Onest',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ── Радиусы ── */
  --r:22px;               /* карточки в приложении */
  --rs:14px;              /* поля, мелкие карточки */

  /* ── Совместимые имена: их используют app / admin / юридические страницы ── */
  --bg:var(--paper);   --bg2:var(--paper2);
  --sur:var(--card);   --sur2:var(--paper);
  --bdr:var(--line);   --bdr2:var(--line2);
  --acc:var(--or-t);   --acc-bright:var(--or-t);
  --acc-l:rgba(255,107,26,.14);  --acc-b:rgba(255,107,26,.55);
  --grn:var(--mint-i);   --grn-l:var(--mint);    --grn-b:rgba(19,122,71,.35);
  --red:var(--rose-i);   --red-l:var(--rose);    --red-b:rgba(194,58,41,.35);
  --gold:var(--butter-i);--gold-l:var(--butter); --gold-b:rgba(138,93,0,.35);
  --pro:var(--lilac-i);  --pro-l:var(--lilac);   --pro-b:rgba(84,64,207,.35);
  --txt:var(--ink);    --txt2:var(--ink2);  --txt3:var(--ink3);
  --sh:0 1px 0 rgba(20,22,27,.05);
  --sh2:0 24px 50px -22px rgba(20,22,27,.35);
  --btn:var(--or);     --btn-h:var(--or-d);
}

/* ── База ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ic{width:1em;height:1em;flex-shrink:0;vertical-align:-.14em}

.skip-link{position:fixed;top:-60px;left:12px;z-index:1000;background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 26px;height:52px;border-radius:999px;font-size:15.5px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-family:var(--font);transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s;white-space:nowrap}
.btn-or{background:var(--or);color:var(--ink)}
.btn-or:hover{background:var(--or-d);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(255,107,26,.8)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(20,22,27,.6)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{transform:none;box-shadow:none;background:transparent;color:var(--ink)}
.btn-sm{height:42px;padding:0 20px;font-size:14px}

/* ── Бренд: знак + надпись (картинки из assets/logo). Размер знака — переменная --bm ── */
.brand{display:flex;align-items:center;gap:calc(var(--bm,34px)*.3);text-decoration:none;color:var(--ink)}
.brand-mark{display:block;width:var(--bm,34px);height:var(--bm,34px);flex-shrink:0}
.brand-word{display:block;height:calc(var(--bm,34px)*.6);width:auto}
.brand-word.on-dark{filter:brightness(0) invert(1)}