/* OpenLangKit design tokens and shared chrome.
 * Every page (start, course, lesson, blocks gallery, workspace) loads this first, then its own stylesheet.
 * Blocks themselves (blocks/*.html) stay self-contained and only mirror these colours in blocks/runtime/block.css.
 * No web fonts and no network requests: system font stacks only. */
:root {
  --bg: #faf7f1; --panel: #ffffff; --ink: #20222b; --muted: #62657a; --line: #e7e2d7; --soft: #f2eee5;
  --accent: #3d4fe0; --accent-2: #8a4fe0; --accent-ink: #ffffff; --accent-soft: #e9ebff;
  --sun: #e0693a; --sun-soft: #fde8dc;
  --peach: #f8dfcb; --lav: #e7e1f8; --sage: #dce9d6; --sky: #d8e8f7;
  --warn: #a75b13; --warn-soft: #fff0d8; --bad: #b23a48; --bad-soft: #fbe5e7;
  --cv-block: #1f9d6b; --cv-impl: #3d7fe0; --cv-borrow: #d39a2e; --cv-spec: #c4c5cf;
  --c-block: var(--cv-block); --c-impl: var(--cv-impl); --c-borrow: var(--cv-borrow); --c-spec: var(--cv-spec);
  --grad: linear-gradient(92deg, var(--accent), var(--accent-2));
  --edge: #ddd5c5; --edge-accent: #2a38b3; --edge-sel: #a9b1f3; --edge-dark: rgba(32, 34, 43, .2);
  --focus: rgba(61, 79, 224, .3); --radius: 16px; --shadow: 0 1px 2px rgba(32, 34, 43, .05), 0 10px 30px rgba(32, 34, 43, .07);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Light is the default on every device. Dark is opt-in from the bar (stored as data-theme on <html>). */
:root[data-theme="dark"] {
    --bg: #13141b; --panel: #1b1d27; --ink: #ecedf4; --muted: #a2a5ba; --line: #2d3040; --soft: #222431;
    --accent: #93a0ff; --accent-2: #c19bff; --accent-ink: #10121c; --accent-soft: #272c55;
    --sun: #f39b70; --sun-soft: #3c261b;
    --peach: #4a3527; --lav: #332d52; --sage: #29402f; --sky: #23384d;
    --warn: #e3a35c; --warn-soft: #3a2d1b; --bad: #ee8590; --bad-soft: #3b2226;
    --cv-block: #4ccf97; --cv-impl: #74acf2; --cv-borrow: #e6b458; --cv-spec: #4b4e60;
    --edge: #0a0b10; --edge-accent: #5a67d6; --edge-sel: #4a55a8; --edge-dark: rgba(0, 0, 0, .5);
    --focus: rgba(147, 160, 255, .35); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- global bar (injected by design/nav.js) ---- */
.atlas-bar { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; padding: 9px clamp(14px, 2.4vw, 32px); background: var(--panel); border-bottom: 1px solid var(--line); font: 14px/1.4 var(--font); flex: none; }
.atlas-bar .atlas-brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: 6px; }
.atlas-bar .atlas-mark { width: 30px; height: 30px; flex: none; }
.atlas-bar nav { display: flex; gap: 2px; flex-wrap: wrap; }
.atlas-bar nav a { padding: 5px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.atlas-bar nav a:hover { color: var(--ink); background: var(--soft); }
.atlas-bar nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.atlas-bar .atlas-step { color: var(--muted); font-size: 12px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.atlas-bar .atlas-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.atlas-bar .atlas-theme { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.atlas-bar .atlas-cta { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 6px 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.atlas-bar nav .sep { width: 1px; background: var(--line); margin: 4px 6px; }
@media (max-width: 640px) { .atlas-bar { padding: 8px 12px; } .atlas-bar .atlas-step { display: none; } }
@media print { .atlas-bar { display: none; } }

.atlas-bar nav a.sub { font-size: .92em; }
@media (max-width: 700px) { .atlas-bar nav a.sub, .atlas-bar nav .sep { display: none; } }

/* ---- depth: surfaces sit on a solid bottom edge (--edge*), controls press down into it. Page stylesheets apply the same idea to their own cards. ---- */
.atlas-bar { border-bottom-width: 2px; }
.atlas-bar .atlas-cta { box-shadow: 0 3px 0 var(--edge-accent); }
.atlas-bar .atlas-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--edge-accent); }
.atlas-bar .atlas-cta:active { transform: translateY(3px); box-shadow: none; }
.atlas-bar .atlas-theme { border-width: 2px; box-shadow: 0 2px 0 var(--edge); }
.atlas-bar .atlas-theme:active { transform: translateY(2px); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .atlas-bar .atlas-cta, .atlas-bar .atlas-theme { transition: transform .12s, box-shadow .12s; } }