/* Provenance: copied from design/design-system/tokens/tokens.css (design snapshot origin commit a460480). */
/*
 * Qamisto Design Tokens + utility classes
 * Manual work — not regenerated from Qamisto-DESIGN.md.
 * See README.md "Честно про токены" for why.
 *
 * Source of truth for COLORS / TYPOGRAPHY / SPACING / RADIUS / SHADOW:
 *   design-system/Qamisto-DESIGN.md (YAML front matter)
 *
 * Pipeline (только tokens.json регенерируется автоматически):
 *   npx -y @google/design.md lint Qamisto-DESIGN.md
 *   npx -y @google/design.md export --format dtcg Qamisto-DESIGN.md > tokens/tokens.json
 */

/* ═══════════════════════════════════════════════════════════════
 * ПАЛИТРА · поверхности и текст
 * ═══════════════════════════════════════════════════════════════ */
:root {
  --color-page: #FAF6F0;
  --color-surface: #FFFFFF;
  --color-ink: #1F1B16;
  --color-ink-2: #6B5E4D;
  --color-ink-3: #756857;  /* R2-7: затемнён с #8B7E6F для WCAG AA на surface (5.42:1, было 3.95:1) */
  --color-divider: #EAE2D5;
  --color-divider-dark: #2A2622;

  /* tooltip — тёплый графит, НЕ #000 (жалобы 08.08 №3); постоянен в обеих темах */
  --color-tooltip-bg: #1F1B16;
  --color-tooltip-fg: #FAF6F0;

  /* primary — тёплый лесной, не emerald */
  --color-primary: #0E7E50;
  --color-primary-hover: #0A6A41;
  --color-primary-fg: #FFFFFF;

  /* amber — узбекская чеканка, не amber-600 */
  --color-amber: #C2690C;
  --color-amber-hover: #A55908;
  --color-amber-bg: #F8EBD2;

  /* danger — тёплый кирпич, не red-700 */
  --color-danger: #A82D2D;
  --color-danger-hover: #8A2424;
  --color-danger-fg: #7A2424;
  --color-danger-bg: #F6E1DC;

  /* success / done */
  --color-success: #0E7E50;
  --color-success-bg: #DCEFE2;
  --color-success-fg: #0E4F35;
  --color-done-bg: #C7E5D2;
  --color-done-fg: #0E4F35;

  /* числа в тёмной теме */
  --color-num-on-dark: #5DBC93;

  /* ═══════════════════════════════════════════════════════════════
   * SPACING · 4-grid
   * ═══════════════════════════════════════════════════════════════ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ═══════════════════════════════════════════════════════════════
   * RADIUS
   * ═══════════════════════════════════════════════════════════════ */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* ═══════════════════════════════════════════════════════════════
   * ELEVATION · тёплые тени
   * ═══════════════════════════════════════════════════════════════ */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.04);
  --shadow-md: 0 1px 3px rgba(31, 27, 22, 0.06), 0 4px 12px -2px rgba(31, 27, 22, 0.06);
  --shadow-lg: 0 4px 12px rgba(31, 27, 22, 0.08), 0 16px 32px -8px rgba(31, 27, 22, 0.12);

  /* ═══════════════════════════════════════════════════════════════
   * TYPOGRAPHY · токены
   * ═══════════════════════════════════════════════════════════════ */
  --font-ui: 'Rubik', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Sora', 'Rubik', sans-serif;

  /* Sizes */
  --text-display: 2rem;        /* 32px */
  --text-h1: 1.875rem;          /* 30px */
  --text-h2: 1.5rem;            /* 24px */
  --text-h3: 1.25rem;           /* 20px */
  --text-body-lg: 1rem;         /* 16px */
  --text-body-md: 0.875rem;     /* 14px */
  --text-body-sm: 0.8125rem;    /* 13px */
  --text-label: 0.75rem;        /* 12px */
  --text-caption: 0.6875rem;    /* 11px */

  /* Line heights */
  --leading-display: 1.1;
  --leading-h1: 1.15;
  --leading-h2: 1.2;
  --leading-h3: 1.25;
  --leading-body: 1.5;
  --leading-tight: 1.3;

  /* Tracking */
  --tracking-display: -0.02em;
  --tracking-h1: -0.022em;
  --tracking-h2: -0.018em;
  --tracking-h3: -0.015em;
  --tracking-num: -0.03em;
  --tracking-eyebrow: 0.16em;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ═══════════════════════════════════════════════════════════════
   * MOTION · durations
   * ═══════════════════════════════════════════════════════════════ */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════════
 * TYPOGRAPHY · готовые utility-классы
 * ═══════════════════════════════════════════════════════════════ */

/* Display · 32px bold · для больших заголовков на сайте */
.text-display {
  font-family: var(--font-ui);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-feature-settings: 'cv11', 'ss01';
}

/* H1 · 30px semibold */
.text-h1 {
  font-family: var(--font-ui);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  font-feature-settings: 'cv11', 'ss01';
}

/* H2 · 24px semibold */
.text-h2 {
  font-family: var(--font-ui);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  font-feature-settings: 'cv11', 'ss01';
}

/* H3 · 20px semibold */
.text-h3 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  font-feature-settings: 'cv11', 'ss01';
}

/* Body Large · 16px */
.text-body-lg {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Body Medium · 14px */
.text-body-md {
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Body Small · 13px */
.text-body-sm {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: 1.45;
}

/* Label · 12px medium */
.text-label {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
}

/* Caption · 11px medium */
.text-caption {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
}

/* Eyebrow · 11px uppercase Sora */
.text-eyebrow {
  font-family: var(--font-num);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Numbers · tabular numerals Sora */
.text-number-lg {
  font-family: var(--font-num);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking-num);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}
.text-number-md {
  font-family: var(--font-num);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}
.text-number-sm {
  font-family: var(--font-num);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1;
}

/* ═══════════════════════════════════════════════════════════════
 * ТЕМЫ · два полных набора токенов
 *
 *   :root[data-theme="light"] → светлый набор
 *   :root[data-theme="dark"]  → тёмный набор
 *
 * Без атрибута data-theme — fallback на light (для предотвращения FOUC
 * до инициализации JS).
 *
 * Источник резолва по платформам:
 *   Web  → localStorage 'qamisto-theme' ?? prefers-color-scheme
 *   TMA  → Telegram.WebApp.colorScheme (всегда, без localStorage)
 *
 * Никаких частичных переопределений — каждый набор задаёт ВСЕ токены.
 * ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --color-page: #FAF6F0;
  --color-surface: #FFFFFF;
  --color-card-surface: #FFFFFF;          /* light: карточка на странице = surface (flat) */
  --color-card-on-surface: #FFFFFF;          /* light: карточка на секции = surface (без возвышения, секция невидима) */
  --color-ink: #1F1B16;
  --color-ink-2: #6B5E4D;
  --color-ink-3: #756857;  /* R2-7: затемнён с #8B7E6F для WCAG AA на surface (5.42:1, было 3.95:1) */
  --color-ink-inverse: #FAF6F0;          /* light: текст на тёмном primary */

  /* mediaplan-bar (10.08): inverse-плашка theme-neutral — фикс в обеих темах,
     не переопределяется в dark (иначе тёмный текст на тёмной плашке) */
  --color-inverse-bg: #1F1B16;
  --color-inverse-fg: #FAF6F0;
  --color-offer-price: #1F1B16;          /* light: цена в offer-зоне = ink (тёмный графит) */
  --color-divider: #EAE2D5;

  --color-success: #0E7E50;
  --color-warning: #C2690C;
  --color-danger: #A82D2D;

  --color-muted-bg: #EFE8DE;          /* тёплый кремовый, между page (#FAF6F0) и surface (#FFFFFF) — для нейтральных badges/cards */
  --color-muted-fg: #6B5E50;          /* приглушённый ink-2, читается но не кричит */
  --color-success-bg: #DCEFE2;
  --color-amber-bg: #F8EBD2;
  --color-warning-bg: #F8EBD2;   /* legacy alias → amber-bg. Держим для обратной совместимости и явного семантического имени */
  --color-danger-bg: #F6E1DC;

  --color-success-hover: #0A6841;
  --color-warning-hover: #A65908;
  --color-danger-hover: #8E2626;

  --color-amber-fg: #7A4810;          /* light: тёмный янтарь на светлом кремовом */
  --color-success-fg: #0E4F35;       /* light: тёмный зелёный на светлом мятном (контраст ~7:1) */
  --color-danger-fg: #7A2424;        /* light: тёмный красный на светлом тёплом (контраст ~8:1) */

  --color-primary: #0E7E50;
  --color-primary-hover: #0A6841;
  --color-primary-fg: #FAF6F0;

  --color-spoiler-bg: #E7DCCB;          /* занавес spoiler в посте */
  --color-spoiler-bg-hover: #DFD2BD;    /* hover на закрытом spoiler */

  --color-video-bg-1: #1F1B16;          /* video-плеер всегда тёмный (как реальный плеер) */
  --color-video-bg-2: #2A2622;
  --color-video-fg: #FFFFFF;

  --color-overlay: rgba(31, 27, 22, 0.55);          /* light: scrim за модалкой/диалогом — тёплый графит 55% */
}

/* Fallback when data-theme is missing — no JS ever sets it (ADR-091); kept at six tokens deliberately */
:root:not([data-theme]) {
  --color-page: #FAF6F0;
  --color-surface: #FFFFFF;
  --color-ink: #1F1B16;
  --color-ink-2: #6B5E4D;
  --color-ink-3: #756857;  /* R2-7: затемнён с #8B7E6F для WCAG AA на surface (5.42:1, было 3.95:1) */
  --color-divider: #EAE2D5;
}

:root[data-theme="dark"] {
  --color-page: #16120E;
  --color-surface: #1F1913;
  --color-card-surface: #1F1913;          /* dark: карточка на странице = surface */
  --color-card-on-surface: #251E18;          /* dark: карточка на секции, светлее surface на 1 уровень (~+5L) */
  --color-ink: #F4EEE5;
  --color-ink-2: #D8CCB8;
  --color-ink-3: #9A8C7A;
  --color-ink-inverse: #16120E;          /* dark: текст на светлом primary (primary-fg в dark = page) */

  /* mediaplan-bar inverse-плашка — theme-neutral, те же значения, что в light */
  --color-inverse-bg: #1F1B16;
  --color-inverse-fg: #FAF6F0;
  --color-offer-price: #F4EEE5;          /* dark: цена в offer-зоне = ink (тёпло-белый, как метрики); зелёный — только CTA/активные */
  --color-divider: #332A21;

  /* tooltip — тёплый графит, постоянен в обеих темах (жалобы 08.08 №3) */
  --color-tooltip-bg: #1F1B16;
  --color-tooltip-fg: #FAF6F0;

  --color-success: #5DBC93;
  --color-warning: #E89546;
  --color-danger: #E07878;

    --color-muted-bg: #2A2119;          /* тёплый шоколад, между page (#16120E) и surface (#1F1913) */
  --color-muted-fg: #9A8C7A;          /* светлее, чем ink-3, чтобы быть заметным на тёмном фоне */
--color-success-bg: #1F2A23;
  --color-success-fg: #5DBC93;          /* dark: bright success на тёмном (контраст ~7:1) */
  --color-amber-bg: #2A2218;
  --color-amber-fg: #E8B26B;          /* dark: яркий песочно-янтарный, контраст ~9:1 на amber-bg dark */
  --color-warning-bg: #2A2218;   /* legacy alias → amber-bg в dark */
  --color-danger-bg: #2A1F1D;
  --color-danger-fg: #E8A39A;          /* dark: bright coral на тёмном */
  --color-done-bg: #1F2A23;
  --color-done-fg: #5DBC93;

  --color-success-hover: #4FA37E;
  --color-warning-hover: #D17F30;
  --color-danger-hover: #CC6565;

  --color-primary: #5DBC93;
  --color-primary-hover: #4FA37E;
  --color-primary-fg: #16120E;

  --color-spoiler-bg: #E7DCCB;          /* бежевый занавес остаётся тёплым и в тёмной — читается как «спрятано» */
  --color-spoiler-bg-hover: #DFD2BD;

  --color-video-bg-1: #1F1B16;          /* video-плеер всегда тёмный — в dark теме тоже (как реальный плеер) */
  --color-video-bg-2: #2A2622;
  --color-video-fg: #FFFFFF;

  --color-overlay: rgba(31, 27, 22, 0.55);          /* dark: scrim = тёплый графит (как light), не #000; 0.55 + page=#1F1B16 даёт ~70% затемнение, достаточно для hierarchy */
}

/* ═══════════════════════════════════════════════════════════════
 * FOCUS STATE · для всех интерактивных элементов
 * ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
 * INTERACTIVE STATES · hover/active/focus для кнопок и карточек
 *
 * Классы:
 *   .btn-primary      — зелёная CTA
 *   .btn-secondary    — бежевая outline
 *   .btn-ghost        — прозрачная
 *   .btn-danger       — красная
 *   .card-surface     — базовая карточка (белый фон)
 *   .card-interactive — карточка с hover (канал, плейсмент)
 *
 * Применение: добавь класс к элементу, всё работает из коробки.
 * ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
 * PRIMARY BUTTON · зелёная CTA
 * ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-primary:active {
  background: var(--color-primary-hover);
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary:disabled {
  background: var(--color-ink-3);
  border-color: var(--color-ink-3);
  color: var(--color-surface);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ───────────────────────────────────────────────────────────────
 * SECONDARY BUTTON · бежевая outline
 * ─────────────────────────────────────────────────────────────── */
.btn-secondary {
  background: var(--color-page);
  color: var(--color-ink);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.btn-secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-ink-3);
}
.btn-secondary:active {
  background: var(--color-divider);
  border-color: var(--color-ink-3);
}
/* dark: page (#16120E) читается как «чёрная кнопка» — по DNA
   «бежевая outline» в dark = тёплый шоколад muted-bg (фидбек 13.08) */
:root[data-theme="dark"] .btn-secondary {
  background: var(--color-muted-bg);
  border-color: var(--color-divider);
}
:root[data-theme="dark"] .btn-secondary:hover {
  background: var(--color-divider);
  border-color: var(--color-ink-3);
}
:root[data-theme="dark"] .btn-secondary:active {
  background: var(--color-divider);
  border-color: var(--color-ink-3);
}

/* ───────────────────────────────────────────────────────────────
 * GHOST BUTTON · прозрачная (для второстепенных действий)
 * ─────────────────────────────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  color: var(--color-ink-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover {
  background: var(--color-page);
  color: var(--color-ink);
}
.btn-ghost:active {
  background: var(--color-divider);
  color: var(--color-ink);
}

/* ───────────────────────────────────────────────────────────────
 * DANGER BUTTON · красная (отмена, открыть спор)
 * ─────────────────────────────────────────────────────────────── */
.btn-danger {
  background: var(--color-danger);
  color: var(--color-primary-fg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn-danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  transform: translateY(-1px);
}
.btn-danger:active {
  background: var(--color-danger-hover);
  transform: translateY(0);
}

/* ───────────────────────────────────────────────────────────────
 * CARDS · поверхности с hover для интерактивных списков
 * ─────────────────────────────────────────────────────────────── */
.card-surface {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

/* interactive карточка · для каналов, плейсментов в списке */
.card-interactive {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.card-interactive:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* selected карточка · когда выбрано в списке */
.card-interactive[aria-selected="true"],
.card-interactive.selected {
  border-color: var(--color-primary);
  background: var(--color-success-bg);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* ───────────────────────────────────────────────────────────────
 * INPUTS · текстовые поля с focus-стейтом
 * ─────────────────────────────────────────────────────────────── */
.input-base {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}
.input-base:hover {
  border-color: var(--color-ink-3);
}
.input-base:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-success-bg);
}
.input-base:disabled {
  background: var(--color-page);
  color: var(--color-ink-3);
  cursor: not-allowed;
}

/* ───────────────────────────────────────────────────────────────
 * LINKS · текстовые ссылки
 * ─────────────────────────────────────────────────────────────── */
.link-base {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.link-base:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}
.link-base:active {
  color: var(--color-primary-hover);
}

/* ───────────────────────────────────────────────────────────────
 * THEME TOGGLE · единый паттерн для всех компонентов
 * ─────────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 36px;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font: 500 13px/18px var(--font-ui);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--color-page);
  border-color: var(--color-ink-3);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.theme-toggle:active {
  transform: translateY(1px);
}
.theme-toggle i {
  font-size: 16px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
 * REDUCED MOTION · для prefers-reduced-motion
 * ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * RESET · минимальный, поверх системного
 * ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-page);
  font-feature-settings: 'cv11', 'ss01';
}