/*
 * ZeroToModel design system: shared tokens and reusable classes.
 * Used by the course home (index.html + dashboard.css). Lesson pages do not load it yet;
 * the lesson restyle can link it before style.css and map style.css onto these tokens.
 *
 * THEME   Dark is the default, whatever the device prefers. Light comes from
 *         <html data-theme="auto"> + prefers-color-scheme: light, or from
 *         <html data-theme="light">; <html data-theme="dark"> forces dark. (engine.js's theme
 *         button sets/clears data-theme, so the button and the system both work.)
 *
 * TOKENS
 *   Surfaces   --bg, --bg-2 (page), --glass/--glass-hi (translucent card fill, top → bottom),
 *              --surface/--surface-2 (solid panels: menus, the tutor panel)
 *   Lines      --line (hairline borders), --line-2 (stronger: inputs, hover)
 *   Text       --ink (headings/body), --ink-2 (secondary), --ink-3 (labels, captions; ≥ 4.5:1)
 *   Accent     --accent, --accent-2 (gradient partner), --accent-soft (tinted fills), --accent-ink
 *   Action     --cta-bg / --cta-ink (the primary button: pale on dark, ink on light)
 *   Status     --pass/--pass-soft (passed, correct), --shaky/--shaky-soft (needs work),
 *              --bad (errors), --lock (not reached yet), --focus (focus ring)
 *   Glow       --glow-a (blue), --glow-b (mint): radial background glows and hover shadows
 *              --grad-text (gradient for display text), --noise-op (film-grain strength)
 *   Type       --font (Geist, light 300 for display), --mono (Geist Mono: labels, buttons, code)
 *              --fs-display, --fs-h2, --fs-h3, --fs-lede, --fs-body, --fs-small, --fs-label
 *              --ls-display (tight tracking for big type), --lh-display
 *   Space      --sp-1 … --sp-8 (4 → 128 px), --gutter (page side padding, 16 px on phones), --max
 *   Radii      --r-sm 8, --r 12, --r-lg 16, --r-pill
 *   Shadows    --shadow-1 (resting), --shadow-lift (hover)
 *   Motion     --ease-out (decelerate), --ease-spring (slight overshoot),
 *              --dur-1 0.2s (micro), --dur-2 0.45s (hover/lift), --dur-3 0.9s (reveal)
 *   Aliases    --text, --muted, --border, --ok, --warn, --warn-soft, --code-bg, --code-text:
 *              the names style.css and the tutor panel already read.
 *
 * CLASSES (prefix zm-)
 *   .zm-page          body: background, font, film grain
 *   .zm-skip          skip link
 *   .zm-glass         glassy card: gradient fill, hairline border, blur
 *   .zm-card-lift     hover lift + glow for cards
 *   .zm-glow          absolutely-placed breathing radial glow (put it inside a position:relative box)
 *   .zm-gradient-text animated gradient display text
 *   .zm-eyebrow + .zm-dot   small mono kicker with a pulsing status dot
 *   .zm-label, .zm-small, .zm-accent, .zm-chip
 *   .zm-btn (+ --primary, --ghost, --sm), .zm-btn-arrow inside it
 *   .zm-reveal        fades/slides in once visible. Add .zm-motion to <html> and .is-in to the
 *                     element (an IntersectionObserver does it; see dashboard.js setupMotion).
 *                     Without .zm-motion the element is simply visible.
 *   Under prefers-reduced-motion every animation and transition in this file is switched off.
 */

:root {
  --bg: #04070f;
  --bg-2: #060c19;
  --glass: rgba(16, 26, 46, 0.52);
  --glass-hi: rgba(28, 44, 74, 0.6);
  --surface: #0b1426;
  --surface-2: #111d33;
  --line: rgba(150, 196, 255, 0.13);
  --line-2: rgba(150, 196, 255, 0.26);
  --ink: #e8f3ff;
  --ink-2: #a8c1dd;
  --ink-3: #7690ae;
  --accent: #86c8ff;
  --accent-2: #4f9dff;
  --accent-soft: rgba(134, 200, 255, 0.12);
  --accent-ink: #04070f;
  --cta-bg: #dff0ff;
  --cta-ink: #04070f;
  --pass: #74e0b4;
  --pass-soft: rgba(116, 224, 180, 0.14);
  --shaky: #ffb86b;
  --shaky-soft: rgba(255, 184, 107, 0.14);
  --bad: #ff8f86;
  --lock: #50627f;
  --focus: #ffd27a;
  --glow-a: rgba(79, 157, 255, 0.28);
  --glow-b: rgba(116, 224, 180, 0.12);
  --grad-text: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 40%, var(--accent) 80%);
  --noise-op: 0.05;
  --code-bg: #070d1a;
  --code-text: #e6e9ef;

  /* aliases read by style.css-era code and the tutor panel */
  --text: var(--ink);
  --muted: var(--ink-2);
  --border: var(--line-2);
  --ok: var(--pass);
  --warn: var(--shaky);
  --warn-soft: var(--shaky-soft);

  /* type */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(40px, 6vw, 80px);
  --fs-h2: clamp(32px, 4.6vw, 56px);
  --fs-h3: 22px;
  --fs-lede: clamp(17px, 1.6vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 11.5px;
  --ls-display: -0.045em;
  --lh-display: 1.02;

  /* space, size, shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 40px; --sp-7: 72px; --sp-8: 128px;
  --gutter: clamp(16px, 4vw, 44px);
  --max: 1320px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 24px 60px -32px var(--glow-a);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 0.2s; --dur-2: 0.45s; --dur-3: 0.9s;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f3f8fe; --bg-2: #e9f1fb;
    --glass: rgba(255, 255, 255, 0.72); --glass-hi: rgba(255, 255, 255, 0.95);
    --surface: #ffffff; --surface-2: #eef4fb;
    --line: rgba(16, 52, 104, 0.11); --line-2: rgba(16, 52, 104, 0.22);
    --ink: #06101f; --ink-2: #33496a; --ink-3: #566c8b;
    --accent: #0a5cc2; --accent-2: #2f7ff0; --accent-soft: rgba(10, 92, 194, 0.09); --accent-ink: #ffffff;
    --cta-bg: #06101f; --cta-ink: #f3f8fe;
    --pass: #0b7f56; --pass-soft: rgba(11, 127, 86, 0.1);
    --shaky: #a85200; --shaky-soft: rgba(168, 82, 0, 0.1);
    --bad: #b03a2e; --lock: #b7c4d6; --focus: #c26a00;
    --glow-a: rgba(47, 127, 240, 0.18); --glow-b: rgba(11, 127, 86, 0.08);
    --noise-op: 0.035; --code-bg: #0e1626;
    --shadow-1: 0 1px 2px rgba(16, 52, 104, 0.06), 0 10px 30px -18px rgba(16, 52, 104, 0.25);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3f8fe; --bg-2: #e9f1fb;
  --glass: rgba(255, 255, 255, 0.72); --glass-hi: rgba(255, 255, 255, 0.95);
  --surface: #ffffff; --surface-2: #eef4fb;
  --line: rgba(16, 52, 104, 0.11); --line-2: rgba(16, 52, 104, 0.22);
  --ink: #06101f; --ink-2: #33496a; --ink-3: #566c8b;
  --accent: #0a5cc2; --accent-2: #2f7ff0; --accent-soft: rgba(10, 92, 194, 0.09); --accent-ink: #ffffff;
  --cta-bg: #06101f; --cta-ink: #f3f8fe;
  --pass: #0b7f56; --pass-soft: rgba(11, 127, 86, 0.1);
  --shaky: #a85200; --shaky-soft: rgba(168, 82, 0, 0.1);
  --bad: #b03a2e; --lock: #b7c4d6; --focus: #c26a00;
  --glow-a: rgba(47, 127, 240, 0.18); --glow-b: rgba(11, 127, 86, 0.08);
  --noise-op: 0.035; --code-bg: #0e1626;
  --shadow-1: 0 1px 2px rgba(16, 52, 104, 0.06), 0 10px 30px -18px rgba(16, 52, 104, 0.25);
  color-scheme: light;
}

/* ------------------------------------------------------------------ page */
.zm-page {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* film grain, very faint */
.zm-page::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--noise-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.zm-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.zm-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--cta-bg); color: var(--cta-ink); font: 500 14px var(--mono); text-decoration: none;
}
.zm-skip:focus { top: 12px; }

/* ------------------------------------------------------------------ text */
.zm-small { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.zm-label { font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.zm-accent { color: var(--accent); }
.zm-gradient-text {
  background: var(--grad-text); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zm-sheen 9s linear infinite; padding-bottom: 0.06em;
}
@keyframes zm-sheen { to { background-position: -200% 0; } }
.zm-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 400 13px var(--mono); color: var(--ink-2); letter-spacing: 0.02em; }
.zm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pass); animation: zm-ping 2.6s var(--ease-out) infinite; }
@keyframes zm-ping { 0% { box-shadow: 0 0 0 0 var(--pass-soft); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.zm-chip { flex: none; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font: 400 var(--fs-label) var(--mono); color: var(--ink-2); white-space: nowrap; }
.zm-chip:empty { display: none; }

/* ------------------------------------------------------------------ surfaces */
.zm-glass {
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.zm-card-lift { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2) var(--ease-out); }
.zm-card-lift:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lift); }
.zm-glow {
  position: absolute; z-index: -1; inset: -120px 0 auto; height: 760px; pointer-events: none;
  background:
    radial-gradient(42% 46% at 72% 30%, var(--glow-a), transparent 70%),
    radial-gradient(30% 40% at 18% 12%, var(--glow-b), transparent 70%);
  animation: zm-breathe 14s ease-in-out infinite alternate;
}
@keyframes zm-breathe { to { transform: translate3d(-3%, 2%, 0) scale(1.06); opacity: 0.8; } }

/* ------------------------------------------------------------------ buttons */
.zm-btn {
  --lift: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 22px; border-radius: 10px; cursor: pointer; text-decoration: none;
  font: 400 14.5px/1.25 var(--mono); letter-spacing: 0.01em; border: 1px solid transparent;
  transform: translateY(var(--lift));
  transition: transform 0.35s var(--ease-spring), background-color var(--dur-1), border-color var(--dur-1), box-shadow 0.35s var(--ease-out);
}
.zm-btn:hover { --lift: -2px; }
.zm-btn:active { --lift: 0px; transition-duration: 0.08s; }
.zm-btn--primary { background: var(--cta-bg); color: var(--cta-ink); }
.zm-btn--primary:hover { box-shadow: 0 10px 40px -8px var(--glow-a); }
.zm-btn--ghost { color: var(--ink); border-color: var(--line-2); background: transparent; }
.zm-btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.zm-btn--sm { min-height: 42px; padding: 0 16px; font-size: 13.5px; }
.zm-btn[disabled] { opacity: 0.55; cursor: progress; }
.zm-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.zm-btn-arrow { display: inline-block; transition: transform 0.35s var(--ease-spring); }
.zm-btn:hover .zm-btn-arrow { transform: translateX(3px); }
.zm-btn--ghost:hover .zm-btn-arrow { transform: translate(2px, -2px); }

/* ------------------------------------------------------------------ reveal on scroll */
.zm-motion .zm-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: var(--rd, 0s); }
.zm-motion .zm-reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zm-gradient-text, .zm-dot, .zm-glow { animation: none; }
  .zm-btn, .zm-btn-arrow, .zm-card-lift { transition: none; }
  .zm-btn:hover, .zm-card-lift:hover { transform: none; }
  .zm-motion .zm-reveal { opacity: 1; transform: none; transition: none; }
}

/* Theme toggle: icon + word (engine.js themeToggle). Narrow screens hide the word. */
.z-theme-toggle { display: inline-flex; align-items: center; gap: 8px; }
.z-theme-ico { width: 16px; height: 16px; flex: none; }
@media (max-width: 520px) {
  .z-theme-toggle .z-theme-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .z-theme-toggle { justify-content: center; width: 40px; padding: 0 !important; gap: 0; }
  .z-theme-ico { width: 18px; height: 18px; }
}