/* OUTranker (владелец, 29.09.2026): брендбук claude.ai/design «Логотип Outranker» поверх v3.
   Поле светло-серое #EFEFEF, карточки белые, текст и тёмные блоки прусские #122435, вторичный
   индиго #224766 — он же акцент интерфейса (ссылки, активный пункт, свой ряд графика). Глубокий
   красный #A3221B — только главная кнопка и одно выделенное слово (--cta), точечно. Заголовки
   Unbounded, текст Onest. Плоско: без градиентов, прозрачности и теней. Цвета состояний
   (рост, падение, ожидание) брендбук не задаёт — они остались свои, приглушённые.

   Прежнее описание v3: Единая дизайн-система, значения v3 (решение владельца D33 поверх D32; таски 18-A и 18-A2).
   Эталон вида — deploy/mockups/v3 (v3.css, cab.css). Белый холст, линии 1 px вместо теней,
   один насыщенный цвет #0036ff — главная кнопка, активный пункт, ключевая цифра. Кнопки и метки —
   пилюли, карточки 14/20, заголовки Inter Tight, текст Inter, метки JetBrains Mono.

   Правило для всех разделов: свой цвет, свой размер и своё скругление не заводить —
   брать переменную отсюда. Всё, что раньше называлось --text, --border, --radius и так
   далее, осталось на месте (ниже они названы псевдонимами) и указывает на значения v3,
   поэтому старые правила в apps/<раздел>/static продолжают работать.

   Белая этикетка (apps/reports): агентство переопределяет --accent только на :root —
   `:root { --accent: #rrggbb; }` отдельным правилом после этого файла. Всё, что зависит от
   акцента (наведение, мягкая подложка, текст на ней, кольцо фокуса, первый ряд графика,
   свечение окна), объявлено здесь же на :root и считается от него через color-mix, поэтому
   новый цвет расходится по всему интерфейсу сам. На обёртке (`.report { --accent: … }`)
   так делать нельзя: производные уже посчитаны на :root и унаследуются со старым акцентом. Писать #0036ff
   где-либо, кроме --accent, нельзя (это проверяет geo/tests/test_design_system.py). */

:root {
  /* --- Холст и поверхности --- */
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #efefef;  /* фон зоны: кабинет, мягкие блоки, шапка таблицы */
  --surface-bar: #e4e6e9;     /* строка заголовка окна продукта */

  /* --- Линии (они держат контейнеры вместо теней) --- */
  --line: #e3e6e9;
  --line-strong: #cdd2d8;     /* рамка поля ввода, разделитель посильнее */
  --line-dark: rgba(255, 255, 255, 0.12); /* линия на тёмной секции */

  /* --- Текст --- */
  --ink: #122435;             /* основной */
  --ink-secondary: #4e5866;   /* второстепенный: 5,8:1 на белом, 5,4:1 на фоне зоны, 4,7:1 на линии */
  /* Приглушённый в v3 отдельной ступени не имеет: подписи идут второстепенным. Имя оставлено,
     на него опираются разделы; значение то же, поэтому исключений «на сером фоне» больше нет. */
  --ink-muted: var(--ink-secondary);
  --ink-quiet: #b3b3b3;       /* только украшение: номер шага, стрелка. Текстом не бывает (1,8:1) */
  --ink-inverse: #ffffff;

  /* --- Акцент: главная кнопка, активный пункт, ключевая цифра. Переопределяется этикеткой ---
     #0036ff на белом — 7,1:1, белый текст на нём — 7,1:1. */
  --accent: #224766;
  --accent-strong: color-mix(in srgb, var(--accent) 82%, #000000); /* наведение ≈ #002ad1 из эталона */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, #ffffff);   /* голубая подложка ≈ #e1ecff */
  --accent-line: color-mix(in srgb, var(--accent) 22%, #ffffff);   /* рамка вокруг мягкой подложки */
  --accent-ink: color-mix(in srgb, var(--accent) 80%, #000000);

  /* --- Красный OUTranker: главная кнопка, выделенное слово заголовка, подпись логотипа.
     Точечно — брендбук даёт ему около 2 % площади. Белый на нём 7,3:1, он на белом 7,3:1. --- */
  --cta: #a3221b;
  --cta-hover: color-mix(in srgb, var(--cta) 86%, #000000);
  /* На чём стоит логотип: вырезы под «OUT» и подпись закрашены этим цветом (ui/logo.html). */
  --logo-surface: var(--canvas);
  --size-logo-out: 21px;    /* «OUT» логотипа, размер sm брендбука */
  --size-logo-label: 7px;   /* подпись AI SEARCH */    /* акцент текстом на мягкой подложке: 7,7:1 */

  /* --- Тёмная кнопка и тёмные поверхности --- */
  --solid: #122435;           /* «тёмная» кнопка: второе по силе действие */
  --solid-hover: color-mix(in srgb, var(--solid) 82%, #ffffff);
  --void: #122435;            /* тёмное окно продукта, терминал */
  --void-bar: #0c1a27;        /* строка заголовка тёмного окна */
  --ink-on-void: #e8edf2;     /* текст тёмного окна */
  --cosmos: #122435;          /* низ тёмной секции первого экрана */

  /* --- Информационный голубой: только точка и подложка метки, не текст (3,2:1) --- */
  --info: #0093ff;
  --info-ink: #0a5fc2;

  /* --- Светофор окна продукта в стиле macOS: часть рисунка окна, не интерфейса --- */
  --mac-close: #ff5f57;
  --mac-minimize: #febc20;
  --mac-zoom: #28c840;

  /* --- Мягкие подложки. Только под метки и маленькие вставки, не под блоки --- */
  --tint-sky: #e1ecff;
  --tint-mint: #e6fff7;
  --tint-sand: #fff4e0;
  --tint-rose: #fdecea;

  /* --- Состояния. Цвет знака, точки и линии графика — не заливка блока (D33) --- */
  --up: #0f9d58;
  --down: #d93025;
  --wait: #9a5b00;
  /* Тот же смысл текстом: #0f9d58 на белом даёт 3,5:1 при норме 4,5:1, поэтому текст
     и метки берут затемнённые значения эталона: рост 5,2:1 на мятной, падение 5,7:1
     на розовой, ожидание 5,0:1 на песочной. */
  --up-ink: #0b7a45;
  --down-ink: #b3261e;
  --wait-ink: #9a5b00;

  /* --- Ряды графиков. Один источник правды для ECharts (static/js/echarts-theme.js):
     тема читает эти переменные, поэтому белая этикетка перекрашивает и графики.
     Порядок закреплён: свой бренд получает первый цвет — акцент — и не меняет его от того,
     поднялся он в списке или опустился. Каждый цвет держит на холсте не меньше 3:1 —
     норма для графики. Светлотой восемь рядов не развести, поэтому ряды различаются
     ещё и типом линии и значком: см. SERIES_LINES и SERIES_SYMBOLS в теме. --- */
  --chart-1: var(--accent);
  --chart-2: #c2410c;
  --chart-3: #166534;
  --chart-4: #b45309;
  --chart-5: #8b5cf6;
  --chart-6: #0e7490;
  --chart-7: #be185d;
  --chart-8: var(--ink-secondary);
  --chart-rival: #737889;     /* «остальные» одним цветом, когда важен только свой ряд: 3,2:1 */
  --chart-track: #d6d6db;     /* пустая дорожка полосы и кольца — не данные */

  /* --- Шрифты. Всё в static/fonts, внешних адресов нет. Рубль и стрелки — из Inter --- */
  --font-display: "Unbounded", "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Типографика --- */
  /* Первый экран публичной страницы — и только он. Ни в кабинете, ни на внутренних
     публичных страницах эту ступень не применять: там потолок --size-display, а заголовок
     страницы кабинета — --size-h1. Готовое правило для неё одно: `.hero h1` / `.hero__title`. */
  --size-hero: clamp(30px, 3.4vw, 46px);  /* Unbounded широкий: потолок 46, не 64 */
  --size-display: clamp(32px, 4vw, 48px); /* заголовок публичной секции */
  --size-h1: 28px;     /* заголовок страницы кабинета */
  --size-h2: 20px;     /* заголовок карточки кабинета (c-card h2 в эталоне) */
  --size-h3: 17px;     /* заголовок маленькой карточки, пункт списка дел */
  --size-lead: 18px;   /* вводный абзац публичной секции */
  --size-body: 16px;   /* тело, 16/1.5 */
  --size-dense: 14px;  /* плотные данные, 14/1.43 */
  --size-small: 13px;  /* подпись цифры, крошки, маленькая кнопка, заметка */
  --size-caption: 12px;
  --size-micro: 11px;
  --size-figure: 34px; /* большая цифра карточки */
  --lh-display: 1.08;
  --lh-heading: 1.25;
  --lh-body: 1.5;
  --lh-dense: 1.43;
  --track-display: -0.03em; /* заголовки */
  --track-hero: -0.03em;    /* первый экран и большая цифра */
  --track-mono: 0.03em;     /* моноширинная метка */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;       /* заголовки Unbounded и логотип */

  /* --- Отступы: только кратные четырём --- */
  --space-1: 4px;
  --space-2: 8px;   /* расстояние между элементами по умолчанию */
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;  /* поля карточки кабинета */
  --space-7: 28px;  /* верхнее поле рабочего поля кабинета */
  --space-8: 32px;
  --space-9: 36px;  /* боковые поля рабочего поля кабинета */
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px; /* промежуток между секциями публичной страницы */
  --space-20: 80px;
  --space-22: 88px; /* поля финального тёмного блока */
  --space-26: 104px; /* большой промежуток секции лендинга */
  --space-28: 112px;
  /* Полушаги эталона v3 (cab.css, v3.css): плотные элементы — пункты меню, метки, поля
     ввода, строки таблицы — стоят на 2/6/10/14/18/22 px. Других промежуточных нет. */
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;
  --space-4-5: 18px;
  --space-5-5: 22px;

  /* --- Скругления (D33). Других значений не заводить --- */
  --radius-pill: 999px;
  --radius-input: 6px;
  --radius-btn: 6px;   /* кнопки — пилюли */
  --radius-card: 12px;
  --radius-card-lg: 24px;
  --radius-window: 14px;              /* окно продукта в стиле macOS */
  --radius-block: 24px;               /* крупный блок: выпадающее меню, тёмная секция на телефоне */
  --radius-block-lg: 32px;            /* самый крупный блок: финальная тёмная секция лендинга */
  --radius-logo: 4px;                 /* рамка логотипа OUTranker */

  /* --- Тени: только почти незаметные, набор эталона --- */
  --sh-card: rgba(0, 0, 0, 0.04) 0 0 0 1px;
  --sh-float: rgba(0, 0, 0, 0.06) 0 12px 12px -3px, rgba(0, 0, 0, 0.04) 0 6px 6px -3px, rgba(0, 0, 0, 0.02) 0 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0 1px 1px -0.5px;
  --sh-xl: rgba(0, 0, 0, 0.04) 0 24px 32px -3px, rgba(0, 0, 0, 0.06) 0 12px 24px -3px, rgba(0, 0, 0, 0.04) 0 6px 6px -3px, rgba(0, 0, 0, 0.04) 0 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0 1px 1px -0.5px;
  --sh-btn: none;
  --sh-dark: rgba(255, 255, 255, 0.06) 0 1px 3px 0 inset, rgba(2, 9, 44, 0.24) 0 16px 56px 0, rgba(1, 9, 44, 0.24) 0 4px 16px 0, rgba(5, 6, 27, 0.52) 0 0 0 1px;
  --sh-tab: rgba(0, 0, 0, 0.06) 0 1px 2px 0;   /* выбранная вкладка-пилюля, поверх --sh-card */
  --sh-glow: none; /* окно на тёмном первом экране */
  --shadow-btn: var(--sh-btn);
  --shadow-float: var(--sh-float);

  /* --- Тёмная секция первого экрана: «небо → космос». Только публичный каркас,
     внутри кабинета градиентов нет (D33). Светлая часть неба привязана к пикселям, а не
     к процентам: высоту секции задаёт её содержимое, и в процентах светлая полоса уезжала бы
     под текст. К 116 px небо уже #1046e9 (белый 6,8:1, подзаголовок 82 % — 5,1:1), текст
     начинается с 120 px (отступ .hero--space в app.css); ниже только темнее. --- */
  --gradient-space: linear-gradient(180deg, #122435 0px, #122435 100%);
  /* Отступ текста первого экрана от верхнего края секции: выше него светлое небо. Меньше
     116 px не ставить — geo/tests/test_design_system.py сверяет его с градиентом. */
  --hero-space-top: 120px;
  --gradient-space-block: linear-gradient(180deg, #122435 0%, #122435 100%);

  /* --- Движение --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Фокус: виден всегда, одинаковый во всём продукте --- */
  --focus-color: var(--accent);
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, #ffffff);

  /* --- Ширина и ритм --- */
  --container: 1200px;
  --gutter: 24px;
  --section-gap: var(--space-16);
  --sidebar: 232px;
  --topbar-height: 60px;
  --work-max: 1080px;  /* рабочее поле кабинета не шире этого */

  /* --- Псевдонимы прежних имён: правила из apps/<раздел>/static читают их --- */
  --bg: var(--canvas);
  --bg-subtle: var(--surface-subtle);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text: var(--ink);
  --text-muted: var(--ink-secondary);
  --text-faint: var(--ink-muted);
  --muted: var(--ink-secondary);
  --accent-hover: var(--accent-strong);
  --positive: var(--up-ink);
  --negative: var(--down-ink);
  --danger: var(--down-ink);
  --warning: var(--wait-ink);
  --radius-sm: var(--radius-input);
  --radius: var(--radius-card);       /* прежде 8: разделы кладут его на плашки и заметки, не на кнопки */
  --radius-lg: var(--radius-card-lg);
  --shadow: none;
  --shadow-lg: var(--shadow-float);
}

/* --- Сброс и основа --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle);  /* серое поле, белые карточки (OUTranker) */
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--ink);
}
h1 { font-size: var(--size-display); line-height: var(--lh-display); font-weight: var(--weight-bold); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4, h5, h6 { font-family: var(--font); font-size: var(--size-body); font-weight: var(--weight-semibold); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

small { font-size: var(--size-caption); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
img, svg, video { max-width: 100%; height: auto; }

/* Фокус виден везде и одинаково; мышью по кнопке кольцо не рисуется. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

::selection { background: var(--accent-soft); color: var(--ink); }