/* ==========================================================================
   CROSCOPE - BRAND & DESIGN SYSTEM TOKENS (v3.3 croscope cabinet, brandbook-v2 tokens 1.3)
   Source of truth: /workspace/croscope/brand/brandbook-v2/tokens.css (tokens 1.3).
   Surfaces and action accent follow brandbook-v2 tokens 1.3.
   Severity and speed HEX kept for the annotator contract.
   Canonical croscope names are appended (--croscope-*): palette, dense UI (1.2), icons (1.3).
   Платформа поиска мест, где сайт теряет заявки
   Шрифты: OFL-1.1 (Inter, Geist, JetBrains Mono, Geist Mono)
   ========================================================================== */

/* 1. ЛОКАЛЬНЫЕ ШРИФТЫ */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Variable.woff2') format('woff2'),
       url('/assets/fonts/Inter-Variable.woff2') format('woff2'),
       url('./fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.woff2') format('woff2'),
       url('/assets/fonts/Geist-Variable.woff2') format('woff2'),
       url('./fonts/Geist-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Variable.woff2') format('woff2'),
       url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2'),
       url('./fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./fonts/GeistMono-Variable.woff2') format('woff2'),
       url('/assets/fonts/GeistMono-Variable.woff2') format('woff2'),
       url('./fonts/GeistMono-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. БАЗОВЫЕ ТОКЕНЫ: NOBLE GRAPHITE DARK (:root) */
:root,
[data-theme="dark"] {
  /* Благородные глубокие поверхности (Tactile Graphite & Slate) */
  --bg-void: #0B0D12;              /* Graphite 950, brandbook-v2 */              /* Глубокий благородный графит (основной холст) */
  --bg-surface: #12151C;           /* Graphite 900 */           /* Тактильный сланец для карточек, слайдов и панелей */
  --bg-elevated: #16191F;          /* Graphite 850 */          /* Приподнятый слой (модальные окна, дроверы, ховеры) */
  --bg-subtle: #1B1F29;            /* Graphite 800 */            /* Вторичные плашки, инпуты и контролы */
  --bg-glass: rgba(18, 21, 28, 0.86);
  --bg-glass-heavy: rgba(11, 13, 18, 0.94);

  /* Текст и типографическая иерархия (WCAG AAA / AA) */
  --text-primary: #E7E9EF;         /* Graphite 100 */         /* Теплый алебастр (контраст 17.8:1 AAA) */
  --text-secondary: #7C8498;       /* Graphite 400, AA 5.19 */       /* Спокойный серебристый сланец (контраст 7.3:1 AAA) */
  --text-muted: #7C8498;           /* Graphite 400, AA */           /* Деликатные подписи и метки (контраст 4.6:1 AA) */
  --text-on-accent: #FFFFFF;

  /* Тонкие архитектурные границы */
  --border-subtle: rgba(231, 233, 239, 0.08);
  --border-default: rgba(231, 233, 239, 0.14);
  --border-strong: rgba(231, 233, 239, 0.22);
  --border-focus: #3B6BFF;          /* Cobalt */

  /* Брендовые акценты Croscope.
     В кабинете работает один chromatic-акцент: Royal Iris.
     Terracotta - искра логотипа и редкий акцент роста CR в пайплайне офферов.
     Jade - только успех / «включено» (точка 6px + спокойный текст), не кнопка запуска. */
  --brand-primary: #3B6BFF;        /* Cobalt: only primary action */        /* Royal Iris Indigo - единственный акцентный цвет хрома */
  --brand-primary-hover: #4E7AFF;
  --brand-primary-dim: rgba(59, 107, 255, 0.10);
  --brand-primary-border: rgba(59, 107, 255, 0.28);

  --brand-secondary: #E8884A;      /* Warm Terracotta - логотип и редкие CR-моменты, не хром диагностики */
  --brand-secondary-hover: #F29A60;
  --brand-secondary-dim: rgba(232, 136, 74, 0.10);
  --brand-secondary-border: rgba(232, 136, 74, 0.28);

  --brand-tertiary: #28B88A;       /* Verdigris Jade - успех и состояние «включено» */
  --brand-gradient: linear-gradient(135deg, #6E62F9 0%, #9E6BF5 52%, #E8884A 100%); /* только знак логотипа и маркетинг */
  --brand-glow-logo: 0 8px 28px rgba(110, 98, 249, 0.22); /* только знак логотипа */
  --brand-glow: none;              /* в кабинете карточки и панели не светятся */

  /* Семантика данных.
     Яркие HEX (`--severity-*`, `--speed-*`) - для рентгена страницы (пины, рамки, pill)
     и для точечного кодирования цифры / точки / рельса 2px.
     Суффиксы -bg / -border / -surface - только мягкие пятна кабинета (6-8% альфа).
     Не заливайте ими целую карточку и не сочетайте заливку + рамку + заголовок + бейдж. */
  --speed-fast: #3B6BFF;           /* good: Cobalt, never traffic-light green */
  --speed-fast-bg: rgba(59, 107, 255, 0.08);
  --speed-fast-border: rgba(59, 107, 255, 0.22);
  --speed-moderate: #A3A9B8;       /* Graphite 300 */
  --speed-moderate-bg: rgba(163, 169, 184, 0.08);
  --speed-moderate-border: rgba(163, 169, 184, 0.22);
  --speed-slow: #E7E9EF;           /* Graphite 100; Signal only on the single worst metric */
  --speed-slow-bg: rgba(231, 233, 239, 0.08);
  --speed-slow-border: rgba(231, 233, 239, 0.14);

  /* Диагностика и уровни критичности (P0 / P1 / P2) */
  --severity-critical: #FF5A36;    /* Signal: the one finding, pins, worst metric */
  --severity-critical-fg: #E7E9EF; /* Graphite 100: Signal is not badge text */
  --severity-critical-bg: rgba(255, 90, 54, 0.08);
  --severity-critical-surface: rgba(255, 90, 54, 0.05);
  --severity-critical-border: rgba(255, 90, 54, 0.22);
  --severity-critical-rail: #FF5A36;

  --severity-major: #FF5A36;       /* high: Signal outline only, not fill */
  --severity-major-fg: #E7E9EF;
  --severity-major-bg: rgba(255, 90, 54, 0.06);
  --severity-major-surface: rgba(163, 169, 184, 0.05);
  --severity-major-border: rgba(255, 90, 54, 0.28);
  --severity-major-rail: #A3A9B8;

  --severity-minor: #A3A9B8;       /* medium: Graphite 300 */
  --severity-minor-fg: #7C8498;
  --severity-minor-bg: rgba(163, 169, 184, 0.08);
  --severity-minor-surface: rgba(163, 169, 184, 0.05);
  --severity-minor-border: rgba(163, 169, 184, 0.20);
  --severity-minor-rail: #7C8498;

  /* HTTP-статус не заводит четвертый KPI-цвет: 5xx = P0, 4xx = P1.
     Токен сети оставлен только для редкой иконки протокола. */
  --severity-network: #7B5BFF;      /* Spectrum, not a fourth traffic light */
  --severity-network-bg: rgba(123, 91, 255, 0.08);
  --severity-network-border: rgba(123, 91, 255, 0.18);

  --ui-rail-width: 2px;
  --ui-dot-size: 6px;
  --success-dot: var(--croscope-spectrum-on-dark); /* live: Spectrum pip, not jade */

  /* Контрастная броня разметки поверх любого скриншота */
  --xray-armor-dark: rgba(11, 13, 18, 0.94);
  --xray-armor-light: rgba(255, 255, 255, 0.92);
  --xray-pill-bg: rgba(11, 13, 18, 0.92);
  --xray-pill-border: rgba(255, 255, 255, 0.22);
  --xray-bbox-shadow: 0 0 0 1px rgba(11, 13, 18, 0.40); /* data-dense outer halo */
  --xray-bbox-inset: none; /* data-dense: no fill under the frame */

  /* Мониторинг изменений (Diff Tokens) */
  --diff-added: #7393FF;             /* Cobalt on dark */
  --diff-added-bg: rgba(16, 185, 129, 0.14);
  --diff-removed: #A3A9B8;           /* Graphite 300, not traffic-light red */
  --diff-removed-bg: rgba(244, 63, 94, 0.15);
  --diff-modified: #A08BFF;        /* Spectrum on dark */
  --diff-modified-bg: rgba(160, 139, 255, 0.14);

  /* Типографика */
  --font-sans: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Шкала размеров */
  --text-hero: clamp(2.25rem, 3.5vw, 3.25rem);
  --text-title: 22px;           /* hero finding title, Inter 600 */
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.125rem;
  --text-body-lg: 1rem;
  --text-body: 0.875rem;
  --text-caption: 0.75rem;
  --text-micro: 0.6875rem;

  /* Радиусы и глубина */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  --shadow-card: 0 8px 24px rgba(11, 13, 18, 0.22);
  --shadow-popover: 0 20px 48px -8px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(255, 255, 255, 0.16);
  --shadow-pin: 0 0 0 2px #0B0D12; /* data-dense: 2px Graphite 950 halo */

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.22, 1, 0.36, 1); /* brandbook 1.1 */
  --duration-fast: 150ms;
  --duration-normal: 240ms;
}

/* 3. СВЕТЛАЯ ТЕМА: WARM IVORY PAPER ([data-theme="light"]) */
[data-theme="light"] {
  --bg-void: #F4F5F8;              /* Fog */              /* Благородная теплая бумага (для презентаций и КП) */
  --bg-surface: #FFFFFF;           /* Чистый лист оффера / слайда */
  --bg-elevated: #FFFFFF;          /* Вторичный теплый камень */
  --bg-subtle: #E7E9EF;            /* Graphite 100 */
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-heavy: rgba(255, 255, 255, 0.96);

  --text-primary: #12151C;         /* Graphite 900 */         /* Глубокий чернильный (контраст 18.2:1 AAA) */
  --text-secondary: #394052;       /* Graphite 600, AA */       /* Контраст 8.1:1 AAA */
  --text-muted: #394052;           /* Контраст 4.7:1 AA */
  --text-on-accent: #FFFFFF;

  --border-subtle: rgba(11, 13, 18, 0.08);
  --border-default: rgba(11, 13, 18, 0.12);
  --border-strong: rgba(11, 13, 18, 0.22);
  --border-focus: #3B6BFF;

  --brand-primary: #3B6BFF;        /* Deep Royal Iris для дневного режима */
  --brand-primary-hover: #4E7AFF;
  --brand-primary-dim: rgba(59, 107, 255, 0.10);
  --brand-primary-border: rgba(59, 107, 255, 0.28);

  --brand-secondary: #D46B2C;      /* Благородная терракота на светлом */
  --brand-secondary-dim: rgba(212, 107, 44, 0.10);
  --brand-tertiary: #16936B;
  --brand-glow-logo: 0 6px 24px rgba(88, 76, 230, 0.14);
  --brand-glow: none;

  --shadow-card: 0 8px 24px rgba(11, 13, 18, 0.08);
  --shadow-popover: 0 16px 40px -6px rgba(17, 19, 26, 0.14), 0 0 0 1px rgba(17, 19, 26, 0.10);
}

/* 4. РАЗМЕТКА ПОВЕРХ СКРИНШОТОВ (X-RAY ARMOR) */
.xray-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--bg-void);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
}

.xray-bbox {
  position: absolute;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--severity-critical);
  box-shadow: var(--xray-bbox-shadow);
  background: transparent;
  transition: transform var(--duration-fast) var(--ease-snappy),
              background-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  cursor: pointer;
  z-index: 10;
}

.xray-bbox:hover,
.xray-bbox.is-active {
  background: transparent;
  box-shadow: 0 0 0 2px #0B0D12,
              0 0 0 3px var(--severity-critical);
  z-index: 25;
}

.xray-bbox--major {
  border-color: var(--severity-major);
  background: transparent;
}

.xray-bbox--minor {
  border-color: var(--severity-minor);
  background: transparent;
}

.xray-pin {
  position: absolute;
  top: -14px;
  left: -14px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--severity-critical);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFFFFF;
  box-shadow: var(--shadow-pin);
  z-index: 30;
}

.xray-pin--major {
  background: var(--severity-major);
  color: #0B0D13;
}

.xray-pin--minor {
  background: var(--severity-minor);
  color: #0B0D13;
}

/* v1.3 pin recipe (Identity r1): 6px dot, 2px halo, 1px ring. Chip is Graphite 950. */
.xray-pin__dot {
  box-shadow: var(--croscope-pin-dot-shadow);
}
.xray-pin--major .xray-pin__dot {
  box-shadow: var(--croscope-pin-outline-shadow);
}
.xray-pin--minor .xray-pin__dot {
  box-shadow: var(--croscope-pin-outline-shadow);
}


.xray-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--xray-pill-bg);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--xray-pill-border);
  box-shadow: 0 0 0 1.5px rgba(11, 13, 19, 0.95), 0 6px 18px rgba(0, 0, 0, 0.65);
  color: #F4F5F8;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.xray-pill__code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #A08BFF; /* Spectrum on dark */
  font-variant-numeric: tabular-nums;
}

/* 5. ТУМБЛЕР МОНИТОРИНГА ИЗМЕНЕНИЙ */
.croscope-radar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.croscope-radar-toggle__track {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: #1B1F29;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all var(--duration-normal) var(--ease-snappy);
}

.croscope-radar-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9CA3B5;
  transition: transform var(--duration-normal) var(--ease-spring),
              background-color var(--duration-normal) ease;
}

.croscope-radar-toggle.is-on .croscope-radar-toggle__track {
  background: rgba(59, 107, 255, 0.22);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 107, 255, 0.16);
}

.croscope-radar-toggle.is-on .croscope-radar-toggle__thumb {
  transform: translateX(24px);
  background: #F4F5F8;
  box-shadow: none;
}

.font-mono-telemetry {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ==========================================================================
   6. ДИСЦИПЛИНА ЦВЕТА КАБИНЕТА (v3.1 Quiet Cabinet)
   Нейтральный графит делает 90% работы. Цвет кодирует смысл, а не украшает.
   На одном компоненте - только один носитель цвета (рельс ИЛИ цифра ИЛИ бейдж).
   ========================================================================== */

.ui-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--text-primary);
}

.ui-card.is-active {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.ui-card--critical { border-left: var(--ui-rail-width) solid var(--severity-critical-rail); }
.ui-card--major    { border-left: var(--ui-rail-width) solid var(--severity-major-rail); }
.ui-card--minor    { border-left: var(--ui-rail-width) solid var(--severity-minor-rail); }
.ui-card--success  { border-left: var(--ui-rail-width) solid var(--brand-tertiary); }

.ui-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.ui-kpi__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ui-kpi__value--critical { color: var(--severity-critical); }
.ui-kpi__value--major    { color: var(--severity-major); }
.ui-kpi__value--minor    { color: var(--severity-minor); }
.ui-kpi__value--fast     { color: var(--speed-fast); }

.ui-eyebrow {
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-dot {
  width: var(--ui-dot-size);
  height: var(--ui-dot-size);
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.ui-dot--critical { background: var(--severity-critical); }
.ui-dot--major    { background: var(--severity-major); }
.ui-dot--minor    { background: var(--severity-minor); }
.ui-dot--success  { background: var(--success-dot); }
.ui-dot--iris     { background: var(--brand-primary); }

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-micro);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.ui-badge--critical {
  background: var(--severity-critical-bg);
  color: var(--severity-critical-fg);
  border-color: var(--severity-critical-border);
}

.ui-badge--major {
  background: var(--severity-major-bg);
  color: var(--severity-major-fg);
  border-color: var(--severity-major-border);
}

.ui-badge--minor {
  background: var(--severity-minor-bg);
  color: var(--severity-minor-fg);
  border-color: var(--severity-minor-border);
}

.ui-badge--success {
  background: rgba(40, 184, 138, 0.08);
  color: var(--brand-tertiary);
  border-color: rgba(40, 184, 138, 0.22);
}

.ui-badge--count {
  background: var(--severity-critical);
  color: #FFFFFF;
  border-color: transparent;
  min-width: 18px;
  justify-content: center;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ui-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-weight: 550;
}

.icon-chrome {
  color: var(--text-secondary);
}

.icon-chrome.is-active,
.icon-chrome[aria-current="page"] {
  color: var(--brand-primary);
}


/* ==========================================================================
   7. КАНОНИЧЕСКИЕ ТОКЕНЫ CROSCOPE 1.3
   Полная копия brandbook-v2/tokens.css, подключена в этот файл, чтобы
   кабинет не подбирал цвета вручную. Существующие --bg-* / --brand-* /
   --text-* выше сопоставлены с этими значениями.
   Severity / speed HEX в блоке 2 сохранены: контракт аннотатора сканера.
   ========================================================================== */

/* croscope · токены 1.3 (спокойный слой + плотный интерфейс 1.2 + иконки 1.3)
   Канон без изменений: знак «Оптика поля», палитра, строчное слово.
   Этот файл описывает применение в интерфейсе и на сайте.
   Версия 1.0 остаётся в /workspace/croscope/brand/brandbook/tokens.css. */

:root {
  /* ---- Каноническая палитра, те же коды ---- */
  --croscope-graphite-950: #0B0D12;
  --croscope-graphite-900: #12151C;
  --croscope-graphite-850: #16191F; /* новый шаг между 900 и 800, только поверхность */
  --croscope-graphite-800: #1B1F29;
  --croscope-graphite-700: #262B37;
  --croscope-graphite-600: #394052;
  --croscope-graphite-400: #7C8498;
  --croscope-graphite-300: #A3A9B8;
  --croscope-graphite-200: #C8CDD9;
  --croscope-graphite-100: #E7E9EF;
  --croscope-fog:          #F4F5F8;
  --croscope-white:        #FFFFFF;

  --croscope-signal:          #FF5A36;
  --croscope-spectrum:        #7B5BFF;
  --croscope-spectrum-on-dark:#A08BFF;
  --croscope-cobalt:          #3B6BFF;
  --croscope-cobalt-on-dark:  #7393FF;
  --croscope-cobalt-hover:    #4E7AFF;

  /* Системный отказ: не Сигнал. Только ошибки ввода и аварии. */
  --croscope-system-error:       #B54A46; /* рамка, текст на светлом 5.21 */
  --croscope-system-error-on-dark:#D48A86; /* текст на 950, контраст 7.20 */
  --croscope-system-error-bg:    rgba(181, 74, 70, 0.08);

  /* ---- Фон и текст ---- */
  --croscope-bg-dark:         var(--croscope-graphite-950);
  --croscope-bg-light:        var(--croscope-fog);
  --croscope-surface-dark:    var(--croscope-graphite-900);
  --croscope-surface-2-dark:  var(--croscope-graphite-850);
  --croscope-text-dark:       var(--croscope-graphite-100);
  --croscope-text-light:      var(--croscope-graphite-900);
  --croscope-text-muted-dark: var(--croscope-graphite-400);
  --croscope-text-muted-light:var(--croscope-graphite-600);

  /* ---- Линии и свет ---- */
  --croscope-hairline-dark:   rgba(231, 233, 239, 0.08);
  --croscope-hairline-dark-2: rgba(231, 233, 239, 0.14);
  --croscope-hairline-light:  rgba(11, 13, 18, 0.08);
  --croscope-hairline-light-2:rgba(11, 13, 18, 0.12);
  --croscope-inner-light:     inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --croscope-shadow-quiet:    0 8px 24px rgba(11, 13, 18, 0.22);
  --croscope-shadow-none:     none;

  /* ---- Шрифты. Слово знака только кривыми. ---- */
  --croscope-font-word:       "Geist", Inter, sans-serif;
  --croscope-font-ui:         Inter, system-ui, sans-serif;
  --croscope-weight-word:     600;
  --croscope-tracking-word:   -0.02em;

  /* ---- Шкала 1.1: меньше ступеней, спокойный интерлиньяж ---- */
  --croscope-fs-kicker:  11px;
  --croscope-fs-caption: 13px;
  --croscope-fs-body:    15px;
  --croscope-fs-title:   22px;
  --croscope-fs-display: 40px;
  --croscope-lh-body:    1.55;
  --croscope-lh-title:   1.25;
  --croscope-lh-display: 1.12;
  --croscope-tracking-kicker: 0.06em;
  --croscope-tracking-display: -0.03em;
  --croscope-weight-regular: 450;
  --croscope-weight-medium:  550;
  --croscope-ls-eyebrow:     0.04em;
  --croscope-weight-semibold:600;

  /* ---- Радиусы, сетка 8 ---- */
  --croscope-radius-sm:  8px;   /* поля, мелкие кнопки */
  --croscope-radius-md:  12px;  /* кнопки, чипы, внутренние карточки */
  --croscope-radius-lg:  16px;  /* панели, окна */
  --croscope-radius-xl:  20px;  /* крупные контейнеры */
  --croscope-radius-pill:999px;
  --croscope-radius-icon: 22.37%;
  --croscope-radius-fav:  20%;

  /* ---- Движение 1.1: короткое, мягкое, без вспышек ---- */
  --croscope-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --croscope-ease-in-out:  cubic-bezier(0.45, 0, 0.15, 1);
  --croscope-ease-soft:    cubic-bezier(0.16, 1, 0.3, 1);
  --croscope-d-fast:       240ms;
  --croscope-d-med:        320ms;
  --croscope-d-slow:       400ms;

  /* ---- Знак (канон, без изменений) ---- */
  --croscope-mark-modules: 5;
  --croscope-mark-clear:   1;
  --croscope-mark-min:     32px;
  --croscope-mark-min-mono:40px;
  --croscope-mark-small-min:16px;
  --croscope-mark-small-max:32px;
  --croscope-word-min-width:96px;

  /* ---- Роли в интерфейсе 1.1 ---- */
  --croscope-state-found:  var(--croscope-signal);  /* только точка, кольцо, метрика находки */
  --croscope-state-action: var(--croscope-cobalt);  /* единственное главное действие на экране */
  --croscope-pin-size:     22px;
  --croscope-pin-dot:      6px;
  --croscope-pin-ring:     1px;
  --croscope-whisper-max:  12; /* максимум точек поля на одном экране интерфейса */

  /* ---- Движение знака, версия 2 ---- */
  --croscope-motion-intro:          2.8s;
  --croscope-motion-intro-hold:     0.6s;
  --croscope-motion-fixed:          3.2s;
  --croscope-motion-loader:         2.4s;
  --croscope-motion-ease-logo:      cubic-bezier(0.22, 1, 0.36, 1);
  --croscope-motion-letter-stagger: 0.11s;
  --croscope-motion-rdot-at:        2.15s;
  --croscope-motion-rdot-dur:       0.40s;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --croscope-d-fast: 0.01ms;
    --croscope-d-med:  0.01ms;
    --croscope-d-slow: 0.01ms;
    --croscope-motion-intro: 0.01ms;
    --croscope-motion-loader: 0.01ms;
  }
}

/* ---- Плотный интерфейс (1.2, addenda/data-dense-ui-v1.md) ---- */
:root {
  --croscope-heat-1: rgba(123,91,255,0.08);
  --croscope-heat-2: rgba(123,91,255,0.16);
  --croscope-heat-3: rgba(123,91,255,0.28);
  --croscope-heat-4: rgba(123,91,255,0.42);
  --croscope-heat-5: rgba(123,91,255,0.60);
  --croscope-heat-dim-max: 0.12;
  --croscope-pin-dot: 6px;
  --croscope-pin-halo: 2px;
  --croscope-pin-ring: 1px;
  --croscope-sev-critical: #FF5A36;
  --croscope-sev-high: #FF5A36;     /* только кольцо 1px */
  --croscope-sev-medium: #A3A9B8;   /* светлая тема: #394052 */
  --croscope-sev-low: #7C8498;
  --croscope-sev-fixed: #7393FF;    /* светлая тема: #3B6BFF */
  --croscope-sev-system: #D48A86;   /* светлая тема: #B54A46, всегда ромб */
  --croscope-tl-track: rgba(231,233,239,0.14);
  --croscope-tl-progress: #C8CDD9;
  --croscope-tl-playhead: #E7E9EF;
  --croscope-tl-hit: 24px;
  --croscope-tl-hit-touch: 44px;
  --croscope-trail-fade: 400ms;
  --croscope-click-ring: 22px;
  --croscope-click-ring-dur: 240ms;
}
.croscope-dark, [data-theme="dark"] {
  --croscope-heat-1: rgba(160,139,255,0.08);
  --croscope-heat-2: rgba(160,139,255,0.16);
  --croscope-heat-3: rgba(160,139,255,0.28);
  --croscope-heat-4: rgba(160,139,255,0.42);
  --croscope-heat-5: rgba(160,139,255,0.60);
}
@media (prefers-reduced-motion: reduce) {
  :root { --croscope-trail-fade: 0ms; --croscope-click-ring-dur: 0ms; }
}

:root {
  /* Focus ring 1.1: 3px at 28% cobalt */
  --croscope-focus-ring: 0 0 0 3px rgba(59, 107, 255, 0.28);
  --croscope-pin-halo-light: 0 0 0 2px #0B0D12;
  --croscope-pin-halo-dark: 0 0 0 2px rgba(255, 255, 255, 0.90);
  --croscope-pin-dot-shadow: 0 0 0 var(--croscope-pin-halo) var(--croscope-graphite-950), 0 0 0 calc(var(--croscope-pin-halo) + var(--croscope-pin-ring)) var(--croscope-graphite-100);
  --croscope-pin-outline-shadow: 0 0 0 var(--croscope-pin-halo) var(--croscope-graphite-950);

  --croscope-bbox-ring: 1.5px;
  --croscope-bbox-halo: 0 0 0 1px rgba(11, 13, 18, 0.40);
}

:root {
  --croscope-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

:root {
  --croscope-blur-focus: 6px;
  --croscope-sidebar-units: 58;
}

:root {
  --meter-to: 0%;
  --tick-to: 0%;
  --pin-delay: 0s;
  --gauge-to: 0deg;
}


/* ---- Иконки (brandbook-v2 tokens 1.3, icons/README.md) ---- */
:root {
  --croscope-icon-size: 24px;
  --croscope-icon-size-sm: 16px;
  --croscope-icon-stroke: 1.5px;
  --croscope-icon-stroke-sm: 1.25px;
  --croscope-icon-pad: 2px;
  --croscope-icon-radius: 2px;
  --croscope-icon-dot: 3.2px;
  --severity-fixed: #7393FF;
  --font-geist-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}