/* == MCHI TOKENS: generated by scripts/build_tokens.py — do not edit == */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700&family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* МЧИ AI — colour system. Derived from the logo lockup, the neon repeat patterns
   and the existing landing page accent (#FF404A). */
:root{
  /* ── Base: ink navy. The brand lives on dark. ── */
  --ink-900:#0C0A22;      /* deepest, page black */
  --ink-800:#14113A;      /* pattern background navy */
  --ink-700:#1C2452;      /* logo navy — outlines, headings on light */
  --ink-600:#2A3170;      /* raised surface on dark */
  --ink-500:#3C468F;      /* hairline / disabled ink */

  /* ── Neon spectrum (the pattern palette) ── */
  --lime-500:#C6F32B;     /* PRIMARY. Logo "AI", swoosh, CTA */
  --lime-400:#D9FF5C;     /* hover / lighter */
  --lime-600:#A5CE18;     /* pressed */
  --magenta-500:#FF2D8A;
  --pink-500:#F0158C;
  --cyan-500:#22E5D6;
  --orange-500:#FF6B1A;
  --violet-500:#7B4DFF;
  --grass-500:#5FE03C;
  --signal-500:#FF404A;   /* legacy landing accent, kept for alerts/records */

  /* ── Neutrals ── */
  --white:#FFFFFF;
  --paper-100:#F6F6FA;    /* light-mode page */
  --paper-200:#ECECF4;
  --paper-300:#D8D8E6;
  --grey-400:#9A9AB4;
  --grey-500:#6E6E8C;

  /* ── Semantic aliases: DARK is the default theme ── */
  --bg-page:var(--ink-900);
  --bg-surface:var(--ink-800);
  --bg-raised:var(--ink-600);
  --bg-inset:#0A0819;
  --bg-accent:var(--lime-500);

  --text-primary:var(--white);
  --text-secondary:#A9AECD;
  --text-muted:#7B80A2;
  --text-accent:var(--lime-500);
  /* ── Неон в роли ТЕКСТА и ГРАНИЦЫ ──
     Заливки (кнопки, полосы графиков, solid-теги, зоны) всегда берут -500 и одинаковы
     в обеих темах. Но тот же неон в роли текста на светлом фоне нечитаем: cyan даёт
     1.35:1, lime 1.29:1. Поэтому у каждого акцента есть ink-роль: на тёмной теме она
     равна самому -500, в .theme-light подменяется затемнённым вариантом. */
  --accent-ink:var(--lime-500);
  /* --lime-ink — зелёный акцент, когда он должен остаться ЗЕЛЁНЫМ и на светлом фоне
     (герой лендинга, надсекционные лейблы). --accent-ink там уходит в синий. */
  --lime-ink:var(--lime-500);
  --cyan-ink:var(--cyan-500);
  --grass-ink:var(--grass-500);
  --orange-ink:var(--orange-500);
  --magenta-ink:var(--magenta-500);
  --violet-ink:var(--violet-500);
  --signal-ink:var(--signal-500);
  --pink-ink:var(--pink-500);
  --text-on-accent:var(--ink-900);
  --text-link:var(--lime-500);
  --text-link-hover:var(--lime-400);

  --border-hairline:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.22);
  --border-accent:var(--lime-500);

  /* ── Status ── */
  --status-good:var(--lime-500);
  --status-ok:var(--cyan-500);
  --status-warn:var(--orange-500);
  --status-bad:var(--signal-500);

  /* ── Training zones (used in charts, plan blocks, workout tags) ── */
  --zone-recovery:var(--cyan-500);
  --zone-easy:var(--grass-500);
  --zone-tempo:var(--lime-500);
  --zone-threshold:var(--orange-500);
  --zone-vo2:var(--magenta-500);
  --zone-rest:var(--ink-500);
}

/* Light surfaces — used for print, merch mockups and the occasional light section. */
.theme-light{
  --bg-page:var(--paper-100);
  --bg-surface:var(--white);
  --bg-raised:var(--paper-200);
  --bg-inset:var(--paper-200);
  --text-primary:var(--ink-700);
  /* Серые из тёмной темы подобраны под тёмный фон: --grey-400 даёт на белом 2.74:1,
     а на нём сидят все микро-лейблы 11px и подписи табов. Лестница опущена на ступень,
     иерархия secondary → muted сохранена: 7.0:1 и 5.4:1 на --bg-surface. */
  --text-secondary:#4C5070;
  --text-muted:#63637F;
  --text-accent:var(--ink-700);
  /* Затемнённые акценты: каждый даёт не меньше 4.5:1 на --paper-100. */
  --accent-ink:var(--ink-700);
  --lime-ink:#5C7A00;
  --cyan-ink:#0B7A72;
  --grass-ink:#2C7A1B;
  --orange-ink:#AE4200;
  --magenta-ink:#BE005C;
  --violet-ink:#5628D1;
  --signal-ink:#BE1A24;
  --pink-ink:#B00567;
  --text-link:var(--ink-700);
  --text-link-hover:var(--lime-600);
  --border-hairline:rgba(28,36,82,.18);
  --border-strong:rgba(28,36,82,.34);
}

/* Webfonts are loaded from Google Fonts — see fonts.css. */
:root{
  --font-display:"Unbounded","Arial Black",sans-serif;  /* geometric, wide, loud */
  --font-body:"Golos Text","Helvetica Neue",sans-serif; /* Cyrillic-native UI face */
  --font-mono:"JetBrains Mono",ui-monospace,monospace;  /* data, pace, splits */

  /* Scale — display sizes are for 1440px screens; they step down on mobile. */
  --fs-hero:clamp(44px,5.6vw,92px); /* @kind font */
  --fs-display-1:56px; /* @kind font */
  --fs-display-2:42px; /* @kind font */
  --fs-title-1:34px; /* @kind font */
  --fs-title-2:26px; /* @kind font */
  --fs-title-3:20px; /* @kind font */
  --fs-body-lg:18px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-body-sm:14px; /* @kind font */
  --fs-caption:13px; /* @kind font */
  --fs-micro:11px; /* @kind font */

  --lh-tight:0.92; /* @kind font */
  --lh-snug:1.15; /* @kind font */
  --lh-normal:1.5; /* @kind font */
  --lh-loose:1.65; /* @kind font */

  --ls-display:-0.03em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-label:0.08em;   /* uppercase micro-labels */
  --ls-wide:0.16em; /* @kind font */

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
}

:root{
  --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;

  --gutter:var(--space-5);
  --page-pad:var(--space-6);
  --section-pad:var(--space-9);
  --container-max:1280px;
  --content-max:720px;
}

:root{
  /* Corners are generous but never pill-soft on containers.
     Pills are reserved for tags, chips and the primary CTA. */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  --border-width:1px; /* @kind other */
  --border-width-loud:2px;   /* accent outlines, focus */

  /* Shadows on dark are mostly glow; on light they are soft and neutral. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,.50);
  --glow-lime:0 0 0 1px rgba(198,243,43,.35),0 8px 32px rgba(198,243,43,.28);
  --glow-magenta:0 0 0 1px rgba(255,45,138,.35),0 8px 32px rgba(255,45,138,.28);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.06);

  --focus-ring:0 0 0 3px rgba(198,243,43,.55);
}

/* Light theme overrides for effect tokens.
   Heavy black shadows flatten on white; the white inset highlight disappears;
   the lime glow and focus ring vanish at dark-optimised alpha. */
.theme-light{
  --shadow-sm:0 1px 3px rgba(28,36,82,.12);
  --shadow-md:0 8px 24px rgba(28,36,82,.14);
  --shadow-lg:0 24px 60px rgba(28,36,82,.18);
  --glow-lime:0 0 0 1px rgba(92,122,0,.45),0 8px 32px rgba(92,122,0,.22);
  --inset-hairline:inset 0 1px 0 rgba(28,36,82,.07);
  --focus-ring:0 0 0 3px rgba(92,122,0,.50);
}

:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-scene:900ms; /* @kind other */

  --ease-out:cubic-bezier(.22,.85,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-linear:linear; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms; /* @kind other */ --dur-scene:0ms /* @kind other */}
}

:root{
  --pattern-icons:url("brand/pattern-icons.webp"); /* @kind other */
  --pattern-animals:url("brand/pattern-animals.webp"); /* @kind other */
  --pattern-tile-sm:180px; /* @kind other */
  --pattern-tile-md:320px; /* @kind other */
  --pattern-tile-lg:520px; /* @kind other */

  /* Protection scrims placed between a pattern and any text sitting on it. */
  --scrim-solid:rgba(12,10,34,.78); /* @kind other */
  --scrim-top:linear-gradient(180deg,rgba(12,10,34,.92) 0%,rgba(12,10,34,0) 70%); /* @kind other */
  --scrim-bottom:linear-gradient(0deg,rgba(12,10,34,.92) 0%,rgba(12,10,34,0) 70%); /* @kind other */
  --scrim-radial:radial-gradient(120% 90% at 50% 50%,rgba(12,10,34,.90) 0%,rgba(12,10,34,.55) 55%,rgba(12,10,34,.25) 100%); /* @kind other */
}
/* == END MCHI TOKENS == */