/* КОПИЯ из monorepo: packages/shared-tokens/src/tokens.css (генерируется из design/tokens/tokens.json).
 * Обновлять копированием, не правкой. */
/*
 * СГЕНЕРИРОВАНО из design/tokens/tokens.json — правки руками будут затёрты.
 * Менять цвет: правьте канон и запускайте npm run tokens.
 */

:root,
:root[data-theme='light'] {
  /* шрифты — одни на обе темы */
  --f-display: Sora, sans-serif;
  --f-body: 'Hanken Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-display-tracking: -0.03em;

  /* радиусы */
  --r-control: 9px;
  --r-chip: 100px;
  --r-input: 12px;
  --r-card: 14px;
  --r-card-lg: 18px;
  --r-panel: 20px;

  /* отступы */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 28px;
  --sp-7: 36px;
  --sp-8: 48px;
  --sp-9: 56px;

  /* раскладка */
  --layout-topbar: 56px;
  --layout-side-panel: 280px;
  --layout-article-column: 740px;
  --layout-mini-toc: 220px;
  --layout-test-column: 720px;
  --layout-hit-min: 44px;
  --bp-rail: 1280px;

  /* движение */
  --motion-control: 120ms ease;
  --motion-theme: 150ms ease;

  /* цвета светлой темы */
  /* surface */
  --c-surface-page: #f4f6fa;
  --c-surface-card: #ffffff;
  --c-surface-raised: #ffffff;
  --c-surface-code: #eef0f5;
  /* border */
  --c-border-subtle: rgba(22,29,58,0.12);
  --c-border-strong: rgba(22,29,58,0.48);
  /* text */
  --c-text-primary: #161d3a;
  --c-text-body: #2f3646;
  --c-text-muted: #5d6478;
  --c-text-on-accent: #ffffff;
  /* brand */
  --c-brand-primary: #3c56ad;
  --c-brand-secondary: #3c56ad;
  --c-brand-ink: #161d3a;
  --c-brand-accent: #b8541a;
  /* state */
  --c-state-gap: #b8541a;
  --c-state-ok: #35855a;
  --c-state-bad: #c0392e;
  --c-state-warn: #a07219;
  --c-state-ok-text: #1f6644;
  --c-state-bad-text: #a32e24;
  --c-state-warn-text: #7a5612;
  /* control */
  --c-control-bg-hover: rgba(22,29,58,0.05);
  --c-control-bg-active: rgba(22,29,58,0.10);
  --c-control-border-hover: rgba(22,29,58,0.62);
  /* focus */
  --c-focus-ring: #3c56ad;
  /* status */
  --c-status-unread: rgba(22,29,58,0.22);
  --c-status-current: color-mix(in srgb, var(--c-brand-primary) 10%, transparent);
  --c-status-read: #6b7fc4;
  --c-status-confirmed: #2a3f85;
  /* panel */
  --c-panel-gradient-base: #eef0f5;
  --shadow-popover: 0 12px 32px rgba(9,11,16,0.18);
  --shadow-btn-primary: inset 0 1px 0 rgba(255,255,255,0.22);
  --decor-glow-opacity-a: 0.5;
  --decor-glow-opacity-b: 0.4;
  --decor-noise-opacity: 0.05;
  --decor-noise-blend: multiply;
  --code-bg: var(--c-surface-code);
  --focus-ring: 0 0 0 2px var(--c-surface-page), 0 0 0 4px var(--c-focus-ring);
}

:root[data-theme='dark'] {
  /* surface */
  --c-surface-page: #090b10;
  --c-surface-card: #11141c;
  --c-surface-raised: #11141c;
  --c-surface-code: #0d1017;
  /* border */
  --c-border-subtle: rgba(255,255,255,0.08);
  --c-border-strong: rgba(255,255,255,0.34);
  /* text */
  --c-text-primary: #f4f6fa;
  --c-text-body: #d5dae4;
  --c-text-muted: #878fa1;
  --c-text-on-accent: #ffffff;
  /* brand */
  --c-brand-primary: #3c56ad;
  --c-brand-secondary: #8294cb;
  --c-brand-ink: #f4f6fa;
  --c-brand-accent: #e8722e;
  /* state */
  --c-state-gap: #e8722e;
  --c-state-ok: #4da173;
  --c-state-bad: #c9564e;
  --c-state-warn: #d9a13f;
  --c-state-ok-text: #82bd9d;
  --c-state-bad-text: #d98983;
  --c-state-warn-text: #e4bd79;
  /* control */
  --c-control-bg-hover: rgba(255,255,255,0.06);
  --c-control-bg-active: rgba(255,255,255,0.11);
  --c-control-border-hover: rgba(255,255,255,0.50);
  /* focus */
  --c-focus-ring: #8294cb;
  /* status */
  --c-status-unread: rgba(255,255,255,0.22);
  --c-status-current: color-mix(in srgb, var(--c-brand-primary) 13%, transparent);
  --c-status-read: #8294cb;
  --c-status-confirmed: #4a68c4;
  /* panel */
  --c-panel-gradient-base: #161d3a;
  --shadow-popover: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-btn-primary: inset 0 1px 0 rgba(255,255,255,0.22);
  --decor-glow-opacity-a: 0.7;
  --decor-glow-opacity-b: 0.6;
  --decor-noise-opacity: 0.04;
  --decor-noise-blend: overlay;
  --code-bg: var(--c-surface-code);
  --focus-ring: 0 0 0 2px var(--c-surface-page), 0 0 0 4px var(--c-focus-ring);
}