/* P26M — design tokens.
 * Single source of truth for colors, type scale, spacing, radii, shadows,
 * timings, easings. Section/component stylesheets MUST reference tokens.
 */

:root {
    /* ── Color ──────────────────────────────────────────────────────────── */
    --color-base:           #06080C;
    --color-surface:        #0A0D12;
    --color-elevated:       #11151C;
    --color-overlay:        #161B24;
    --color-border:         #22262E;
    --color-border-strong:  #2F3540;

    --color-brand:          #73C44B;
    --color-brand-strong:   #8FE066;
    --color-brand-deep:     #3F7A29;
    --color-brand-glow:     rgba(115, 196, 75, 0.40);
    --color-brand-glow-soft:rgba(115, 196, 75, 0.18);

    --color-accent:         #3B5BFF;
    --color-accent-strong:  #5C77FF;
    --color-accent-deep:    #1D2B6B;
    --color-accent-glow:    rgba(59, 91, 255, 0.28);

    --color-text:           #F5F7FA;
    --color-text-secondary: #A0A8B8;
    /* #6B7280 measured 3.82:1 on --color-surface — fails WCAG AA 4.5:1 for
       body-size captions/labels (P26M-182 backlog item). #808794 clears
       5.11:1 while staying visibly a step below --color-text-secondary. */
    --color-text-tertiary:  #808794;
    --color-text-inverse:   #0A0D12;

    --color-success:        #22C55E;
    --color-warning:        #F59E0B;
    --color-danger:         #EF4444;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-display: "Cabinet Grotesk", "Geist", system-ui, -apple-system, sans-serif;
    --font-body:    "Geist", system-ui, -apple-system, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;

    /* Per-locale display-size trim — see the :lang() block below. 1 = Latin. */
    --display-scale: 1;

    --fs-xs:      clamp(0.75rem, 0.70rem + 0.20vw, 0.8125rem);
    --fs-sm:      clamp(0.8125rem, 0.78rem + 0.20vw, 0.875rem);
    --fs-base:    clamp(0.9375rem, 0.90rem + 0.25vw, 1rem);
    --fs-lg:      clamp(1.0625rem, 1.00rem + 0.40vw, 1.1875rem);
    --fs-xl:      clamp(1.25rem, 1.15rem + 0.60vw, 1.5rem);
    --fs-2xl:     clamp(1.50rem, 1.30rem + 1.00vw, 2rem);
    --fs-3xl:     clamp(1.875rem, 1.55rem + 1.60vw, 2.625rem);
    --fs-4xl:     clamp(2.375rem, 1.85rem + 2.60vw, 3.5rem);
    --fs-5xl:     clamp(3rem, 2.20rem + 4.00vw, 4.75rem);
    --fs-display: clamp(3.5rem, 2.40rem + 5.50vw, 6.5rem);

    --lh-tight:   1.05;
    --lh-snug:    1.20;
    --lh-base:    1.55;
    --lh-relaxed: 1.7;

    --tracking-tighter: -0.035em;
    --tracking-tight:   -0.020em;
    --tracking-normal:  -0.005em;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.08em;

    /* ── Spacing scale (4px base) ───────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10:128px;
    --space-11:160px;

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl:20px;
    --radius-3xl:24px;
    --radius-pill: 999px;

    /* ── Borders ────────────────────────────────────────────────────────── */
    --border-thin:   1px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);
    --border-brand:  1px solid rgba(115, 196, 75, 0.30);

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lift:   0 4px 12px rgba(0, 0, 0, 0.50), 0 24px 48px rgba(0, 0, 0, 0.35);
    --shadow-brand:  0 0 0 1px rgba(115, 196, 75, 0.40), 0 8px 32px rgba(115, 196, 75, 0.20);
    --shadow-accent: 0 0 0 1px rgba(59, 91, 255, 0.40), 0 8px 32px rgba(59, 91, 255, 0.25);
    --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-drop:   0 12px 24px rgba(0, 0, 0, 0.5);

    /* Button shadows — tokenised so light theme can soften them */
    /* Акцентный ореол — только под primary CTA. Ambient-свечение по секциям
       намеренно не возвращаем (P26M-182): «крипто-вайб» давали именно фоновые
       радиальные заливки, а не подсветка кнопки.
       P26M-436: инсет-ободок `0 0 0 1px rgba(255,255,255,…) inset` убран —
       вместе с градиентом и блик-инсетом в utilities.css он достраивал ту же
       скевоморфную «пилюлю» (§5 STYLEGUIDE: не комбинировать больше одной
       тени на элемент). Тень теперь одна — мягкий ореол-подъём, единственный
       job этого токена. */
    --btn-shadow:       0 8px 24px -8px rgba(115, 196, 75, 0.45);
    --btn-shadow-hover: 0 10px 30px -6px rgba(115, 196, 75, 0.60);

    /* Значок-«таблетка» (.tier__badge) — младший брат кнопки, не сама кнопка:
       --btn-shadow посчитан под ~48px кнопку (spread -8, blur 24) и на
       ~24-высокой пилюле читается непропорционально широким пятном, к тому же
       на featured-тарифе это уже третий зелёный слой поверх border-glow и
       radial-фона карточки. Свой, вдвое компактнее радиусом и капелькой мягче. */
    --badge-shadow:     0 3px 8px rgba(115, 196, 75, 0.35);

    /* Contrast ring (ROI summary badge) */
    --ring-contrast: rgba(0, 0, 0, 0.25);

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    --dur-fast:  120ms;
    --dur-base:  220ms;
    --dur-slow:  420ms;
    --dur-slower:720ms;

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --container-max:   1536px;
    /* Пропорциональные поля: на 1440–1600 контейнер упирался в кап 1536,
       внешний отступ схлопывался и оставались только 40px — контент читался
       прижатым к краям. clamp даёт зазор, растущий вместе с экраном. */
    --container-pad:   clamp(20px, 4vw, 64px);
    --header-height:   72px;
    --section-pad-y:   clamp(64px, 7vw, 128px);

    /* ── Article rail (single post) ─────────────────────────────────────────
       Статья живёт в собственной мере, более узкой, чем --container-max:
       колонка чтения + липкий рельс. Все зоны страницы (хлебные крошки,
       шапка, тело, FAQ, автор, похожие) выравниваются по --article-max,
       поэтому левый край один на всю страницу и текст не читается полосой
       в пустом поле. Держать сумму в синхроне: measure + gap + rail. */
    --article-measure: 700px;
    --article-gap:     var(--space-8);
    --article-rail:    320px;
    --article-max:     1084px;
    /* Длинный текст набирается крупнее body: 16px на мобиле → 18px на десктопе,
       ~68 знаков в строке при measure 700px. */
    --fs-article:      clamp(1rem, 0.94rem + 0.28vw, 1.125rem);

    /* ── z-index scale ──────────────────────────────────────────────────── */
    --z-base:    1;
    --z-overlay: 10;
    --z-sticky:  20;
    --z-header:  50;
    --z-modal:   100;
    --z-toast:   1000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CYRILLIC DISPLAY FACE (uk / ru)

   Cabinet Grotesk — латиница и только латиница: в woff2 с Fontshare 442
   кодпоинта и НИ ОДНОГО из U+0400–04FF (проверено по cmap, не на глаз). Из-за
   этого на uk/ru каждый H1–H4 молча проваливался по стеку в "Geist" — то есть
   в тот же шрифт, которым набран весь боди-текст. Отсюда жалоба «шрифт не
   подтянулся, стандартный»: заголовок и абзац под ним рисовались одной
   гарнитурой, типографической иерархии не оставалось.

   Заменитель — Manrope: геометрический гротеск с круглыми счётными формами,
   высоким x-height и плотным трекингом, то есть тот же тип конструкции, что у
   Cabinet Grotesk, и заведомо не Geist (Geist — нео-гротеск с овальными,
   закрытыми апертурами). Полное покрытие украинских ҐґЄєІіЇї, вес до 800.

   Cabinet из стека для uk/ru УБРАН намеренно. Если оставить его первым,
   латинские вкрапления в кириллическом заголовке («API», «PSP», «P26M»)
   набирались бы Cabinet, а остальное — Manrope: две гарнитуры в одной строке
   с разной шириной и весом. Одна гарнитура на локаль читается чище.

   :lang() матчится по префиксу, поэтому :lang(ru) покрывает и lang="ru-RU".
   Латиница (lang="en-GB") этот блок не задевает вообще.
   ═══════════════════════════════════════════════════════════════════════════ */
:root:lang(uk),
:root:lang(ru) {
    --font-display: "Manrope", "Geist", system-ui, -apple-system, sans-serif;

    /* Кириллица в этих переводах длиннее английского оригинала на 15–25%
       по числу символов, и Manrope шире Cabinet Grotesk (~0.97 от Geist
       против 0.89 у Cabinet). Крупные дисплейные строки из-за этого набирали
       лишние строки. Трим применяется только к --fs-4xl/5xl/display-размерам
       через calc(); мелкие заголовки (h3/h4) не трогаем — там переноса нет,
       а уменьшение только сломало бы ритм. */
    --display-scale: 0.94;
}

/* Русский длиннее украинского ещё на ~5% в этих же строках. */
:root:lang(ru) {
    --display-scale: 0.88;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT SURFACE — светлая палитра, ограниченная поддеревом секции.
   Ставится классом .surface--light на <section>; переключателя тем нет,
   светлое используется как ритм страницы (тёмная секция → светлая → тёмная).
   Brand green #3F7A29: 5.21:1 on white (text) and 5.21:1 white-on-green
   (button) — both clear WCAG AA 4.5:1, with more margin than the #2B831C it
   replaced (P26M-423). #2B831C was darkened AND hue/saturation-shifted from
   the brand hue (H100°/S51% → H111°/S65%), which is why it read as a
   different green next to the dark theme's #73C44B. #3F7A29 sits at
   H104°/S50% — same darken-only relationship as the dark theme's own
   --color-brand-deep (it IS that token's value) — so it reads as "the brand
   green, darker" instead of a different color. --color-brand-strong (hover)
   was re-derived the same way to stay in the same hue family.
   ═══════════════════════════════════════════════════════════════════════════ */
.surface--light {
    background: var(--color-base);
    color: var(--color-text);

    --color-base:           #F4F6F9;
    --color-surface:        #FFFFFF;
    --color-elevated:       #FFFFFF;
    --color-overlay:        #EDF0F4;
    --color-border:         #E2E6EC;
    --color-border-strong:  #CDD4DD;

    --color-brand:          #3F7A29;
    --color-brand-strong:   #315C1F;
    --color-brand-deep:     #16500F;

    --color-accent:         #2A41D8;
    --color-accent-strong:  #1F31B0;

    --color-text:           #0E141B;
    --color-text-secondary: #4A5260;
    --color-text-tertiary:  #6B7280;
    --color-text-inverse:   #FFFFFF;

    --color-success:        #1E9E4A;
    --color-warning:        #B45309;
    --color-danger:         #C81E1E;

    --shadow-soft:   0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.07);
    --shadow-lift:   0 4px 12px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.10);
    --shadow-brand:  0 4px 12px rgba(43, 131, 28, 0.14), 0 24px 48px rgba(16, 24, 40, 0.10);
    --shadow-accent: 0 4px 12px rgba(42, 65, 216, 0.12), 0 24px 48px rgba(16, 24, 40, 0.10);
    --shadow-inset:  none;
    --shadow-drop:   0 12px 24px rgba(16, 24, 40, 0.12);

    /* P26M-436: было два слоя (нейтральный контактный drop + зелёный glow) —
       на белом фоне это уже читалось как приподнятая карточка, а не плоская
       кнопка; к тому же rgba(43,131,28,…) — это шестнадцатеричный старого
       --color-brand-deep (#2B831C) ДО ребрендинга P26M-423, токен давно
       #3F7A29 (rgb 63,122,41), а тень тянула другой, более тёмный и более
       синий по тону зелёный. Тень одна, цвет синхронизирован с текущим
       --color-brand. */
    --btn-shadow:       0 6px 16px -2px rgba(63, 122, 41, 0.30);
    --btn-shadow-hover: 0 8px 22px -2px rgba(63, 122, 41, 0.38);

    /* Тот же компактный радиус, что у dark-варианта --badge-shadow — пилюля
       остаётся пилюлей на обеих поверхностях, только цвет и альфа мягче под
       белый фон. */
    --badge-shadow:     0 2px 6px rgba(63, 122, 41, 0.25);

    --ring-contrast: rgba(16, 24, 40, 0.06);

    --border-brand:  1px solid rgba(43, 131, 28, 0.30);
}