/* ai-course — общие токены и «шасси» сайта. Страницы дописывают свои стили поверх. */
:root{
  --bg:#F5F6F3;
  --surface:#FFFFFF;
  --surface-2:#EAEDE8;
  --ink:#1B2126;
  --ink-soft:#4E5A59;
  --border:#D9DDD5;
  --border-strong:#C3C9BE;
  --accent:#2F7A6B;
  --accent-ink:#163F37;
  --accent-soft:#E1EFE9;
  --warn:#B8763B;
  --warn-ink:#6B4419;
  --warn-soft:#F4E7D7;
  --chip-theory-bg:#E7E9E4;
  --chip-theory-ink:#4E5A59;
  --chip-demo-bg:#E1EFE9;
  --chip-demo-ink:#1D5B4E;
  --chip-practice-bg:#2F7A6B;
  --chip-practice-ink:#F5F6F3;
  --shadow: 0 1px 2px rgba(27,33,38,.06), 0 4px 14px rgba(27,33,38,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121717; --surface:#181F1E; --surface-2:#1F2725;
    --ink:#E9ECE7; --ink-soft:#A8B2AC;
    --border:#2B3432; --border-strong:#3A4441;
    --accent:#54B29B; --accent-ink:#BFE9DC; --accent-soft:#1C3630;
    --warn:#D69A5E; --warn-ink:#F1D6B0; --warn-soft:#3A2C1B;
    --chip-theory-bg:#26302D; --chip-theory-ink:#A8B2AC;
    --chip-demo-bg:#1C3630; --chip-demo-ink:#8FDBC4;
    --chip-practice-bg:#54B29B; --chip-practice-ink:#0E1A17;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#121717; --surface:#181F1E; --surface-2:#1F2725;
  --ink:#E9ECE7; --ink-soft:#A8B2AC;
  --border:#2B3432; --border-strong:#3A4441;
  --accent:#54B29B; --accent-ink:#BFE9DC; --accent-soft:#1C3630;
  --warn:#D69A5E; --warn-ink:#F1D6B0; --warn-soft:#3A2C1B;
  --chip-theory-bg:#26302D; --chip-theory-ink:#A8B2AC;
  --chip-demo-bg:#1C3630; --chip-demo-ink:#8FDBC4;
  --chip-practice-bg:#54B29B; --chip-practice-ink:#0E1A17;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ background:var(--bg); }
body{
  margin:0;
  color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  line-height:1.55;
}
h1,h2,h3{ font-family:"Literata", Georgia, serif; text-wrap:balance; margin:0; color:var(--ink); }
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
a{ color:inherit; }

.page{ max-width:1180px; margin:0 auto; padding:0 24px 96px; }

.crumb{
  display:inline-flex; align-items:center; gap:6px; margin-top:28px;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  color:var(--ink-soft); text-decoration:none;
}
.crumb:hover{ color:var(--accent-ink); }

.masthead{
  padding:20px 0 36px; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:18px;
}
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft);
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px; border-radius:5px; width:fit-content;
}
.masthead h1{ font-size:clamp(30px,4vw,44px); font-weight:600; max-width:20ch; }
.masthead .sub{ color:var(--ink-soft); font-size:16.5px; max-width:62ch; }
.stat-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.stat{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; min-width:140px;
}
.stat .n{ font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.stat .l{ font-size:12.5px; color:var(--ink-soft); }

footer.site-footer{
  margin-top:40px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
footer.site-footer a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
footer.site-footer a:hover{ color:var(--accent-ink); }