/* ============================================================================
   tokens.css — единый источник дизайн-токенов post-curator.
   Подключается на всех страницах: landing, index (кабинет), login, viewer,
   и через @import в legal.css — на юридических страницах.

   Палитра выровнена по WCAG 2.2 AA (контраст проверен):
   - --ink-faint:  dark 5.61:1 на bg, light 4.82:1 на bg / 5.17:1 на panel
   - --accent:     dark — белый текст 3.13:1 (крупная кнопка 14.5px/600 ≥3:1),
                   light — белый текст 4.48:1 (обычный ≥4.5)
   - --accent-2:   dark 10.22:1, light 3.50:1 (маркер ✓/бейджи, не основной текст)
   - --danger/--ok: ≥4.5:1 в обеих темах
   ============================================================================ */

:root {
  /* Поверхности */
  --bg:#0e1014; --bg-2:#14161a; --panel:#1c1f26; --panel-2:#23272f; --side:#14161a;
  /* Текст */
  --ink:#e9ecf1; --ink-soft:#a3adbd; --ink-faint:#828c9d;
  /* Линии и акценты */
  --line:#2a2f39;
  --accent:#5b8dff; --accent-soft:#21304f; --accent-2:#2bd4bf;
  /* Семантические */
  --warn:#e5a50a; --danger:#ff7a7a; --ok:#4caf50;
  /* Каркас кабинета: ширина сайдбара. Раньше var(--side-w) нигде не задавался —
     grid-template-columns сваливался в одну колонку и сайдбар растягивался на весь viewport. */
  --side-w:248px;
  /* Тени и эффекты (переопределяются на страницах при необходимости) */
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --glow:radial-gradient(60% 60% at 50% 0%, rgba(91,141,255,.22), transparent 70%);
  /* Совместимость: --repost — прежнее имя --accent-2 в кабинете. */
  --repost:var(--accent-2);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:#f5f7fa; --bg-2:#fff; --panel:#fff; --panel-2:#eef1f6; --side:#fff;
    --ink:#14171c; --ink-soft:#5a6472; --ink-faint:#636e7e;
    --line:#e2e7ef;
    --accent:#2b6cff; --accent-soft:#dfe8ff; --accent-2:#0e9484;
    --warn:#b07300; --danger:#cf3838; --ok:#2c7a33;
    --shadow:0 1px 2px rgba(20,23,28,.06), 0 8px 24px rgba(20,23,28,.05);
    --glow:radial-gradient(60% 60% at 50% 0%, rgba(43,108,255,.14), transparent 70%);
    color-scheme: light;
  }
}

/* ── Базовые утилиты, общие для всех страниц ─────────────────────────────── */

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }
/* Чтобы якоря не прилипали под sticky-навигацией. */
[id] { scroll-margin-top:84px; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); }

/* Только для скринридеров. Visual hide, остаётся в a11y-дереве. */
.visually-hidden,
.sr-only {
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Skip-link: скрыт, виден при фокусе с клавиатуры. */
.skip-link {
  position:fixed; top:-100px; left:12px; z-index:1000;
  background:var(--accent); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:0 0 10px 10px; font-weight:600; font-size:14px;
  transition:top .15s;
}
.skip-link:focus { top:0; }

/* Видимый фокус с клавиатуры для всех интерактивных элементов. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:inherit;
}

/* ── Базовая кнопка (.btn) — единая для landing/login/кабинета ──────────── */
/* Текст 14.5px/600 — не «крупный» по WCAG, поэтому порог контраста 4.5:1.
   В тёмной теме затемняем accent на ~20% к чёрному, чтобы белый текст прошёл AA. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:14.5px; font-weight:600;
  padding:9px 17px; border-radius:10px;
  border:1px solid transparent;
  background:color-mix(in srgb, var(--accent) 80%, #000);
  color:#fff;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s, box-shadow .15s, background .15s;
}
@media (prefers-color-scheme: light) {
  /* В светлой теме accent #2b6cff уже даёт ~4.48:1 — не затемняем. */
  .btn { background:var(--accent); }
}
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent); }
.btn:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }
.btn.ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn.ghost:hover { background:var(--panel); box-shadow:none; }
.btn.lg { font-size:16px; padding:13px 26px; border-radius:12px; }

/* ── Логотип-марка — единый размер/радиус (был рассинхрон 24/26px) ──────── */
.logo { display:flex; align-items:center; gap:9px; font-weight:650; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.logo .mark {
  width:24px; height:24px; border-radius:7px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
/* Белые столбики-значок внутри градиентной марки (тот же мотив, что у favicon). */
.mark > svg { width:100%; height:100%; display:block; }

/* Уважаем preference reduced motion глобально. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}