/* Reset, design tokens, themes and the app shell.
 *
 * Visual identity: "a programmer's notebook" — warm paper, ink lines, two
 * print colours (vermillion for action, teal for done), a highlighter-yellow
 * marker, crisp borders and hard offset shadows like a second print pass.
 * Type: Fraunces (display) · IBM Plex Sans (text) · IBM Plex Mono (code, labels).
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { line-height: 1.5; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ── Tokens: linen (light, default) ──
 * Colour psychology: a calm blue-teal leads (focus, trust), sage green rewards
 * (growth, "done"), a soft terracotta adds warmth only where we invite action,
 * and charcoal-slate replaces pure black so contrast stays readable but gentle.
 * All text colours keep >= 4.5:1 contrast on --bg. */
:root {
  --bg:        #f5f2eb;   /* linen */
  --surface:   #fcfaf6;   /* card stock */
  --sunken:    #ede8df;   /* recessed areas */
  --border:    #ddd6c9;   /* hairlines */
  --ink:       #2c313a;   /* charcoal-slate: strong lines, primary buttons */
  --on-ink:    #fcfaf6;   /* text on ink */
  --text:      #272b33;
  --body-text: #474d57;
  --muted:     #858b94;
  --faint:     #646a74;
  --accent:    #2d6a8a;   /* lagoon blue-teal — links, labels, focus */
  --accent-soft: #dcebf2;
  --warm:      #d9826a;   /* soft terracotta — warmth on calls to action */
  --warm-soft: #f6e1d9;
  --done:      #3d7650;   /* sage — completed, passing */
  --done-soft: #e0eee3;
  --danger:    #b0463c;
  --danger-soft: #f6e0dc;
  --marker:    #fbe39a;   /* butter highlighter */
  --inline-code-bg: #e9e6dd;
  --inline-code-fg: #2a5f7c;
  --shadow-color: #2c313a;
  --shadow:    3px 3px 0 var(--shadow-color);
  --shadow-lg: 5px 5px 0 var(--shadow-color);
  --dot:       #e8e2d6;   /* graph-paper grid */

  --node-bg:      var(--surface);
  --node-bd:      var(--ink);
  --node-tx:      var(--text);
  --node-done-bg: var(--done-soft);
  --node-done-tx: #2c5a3b;

  --radius: 6px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ── Tokens: deep slate (dark) — a calm night-blue, not black ── */
[data-theme="dark"] {
  --bg:        #161b21;
  --surface:   #1d232b;
  --sunken:    #12171c;
  --border:    #323a45;
  --ink:       #e2e6eb;
  --on-ink:    #161b21;
  --text:      #e6e9ee;
  --body-text: #c2c9d2;
  --muted:     #8b95a1;
  --faint:     #9ba5b1;
  --accent:    #86bcd9;
  --accent-soft: #1d3442;
  --warm:      #e59c84;
  --warm-soft: #3a2721;
  --done:      #8fcaa1;
  --done-soft: #1c3226;
  --danger:    #ee9a90;
  --danger-soft: #3a2220;
  --marker:    #6d5e2c;
  --inline-code-bg: #252c35;
  --inline-code-fg: #a9d3ea;
  --shadow-color: #0a0d11;
  --dot:       #1d242c;
  --node-done-tx: #c3ead0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection { background: var(--marker); color: var(--text); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; border: 2px solid var(--bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app { display: flex; flex-direction: column; height: 100vh; }

/* Paper grain: a barely visible noise layer so surfaces feel printed, not flat */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .045;
  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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity: .07; filter: invert(1); }

/* Scroll reveal: only once JS has marked the page (html.js-reveal), so the
   content is always visible without JavaScript. Stagger via --rd. */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--rd, 0) * 90ms);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ── Shared building blocks ── */

/* Mono eyebrow label: "01 — Languages" */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}

/* Highlighter stroke behind a word */
.marker {
  background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  padding: 0 .08em;
}

/* Primary = ink block with a vermillion offset shadow; secondary = outlined */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  border: 2px solid var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .15s, color .15s;
}
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: 4px 4px 0 var(--warm); }
.btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--warm); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--warm); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface); box-shadow: var(--shadow); transform: translate(-1px, -1px); }

/* ── Site footer (About · Privacy · Terms · Contact) on every page ── */
#site-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 7px 24px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  background: var(--bg); border-top: 1px solid var(--border);
}
#site-footer nav { display: flex; gap: 18px; }
#site-footer a:hover { color: var(--accent); }

/* ── Text pages (About, Privacy, Terms, Contact) ── */
.page { flex: 1; min-height: 0; overflow-y: auto; padding: 56px 24px 72px; }
.prose { max-width: 700px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--body-text); }
.prose h1 {
  font-family: var(--font-display); font-size: clamp(34px, 5vw, 48px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin-bottom: 14px;
}
.prose h2 {
  font-family: var(--font-display); font-size: 25px; font-weight: 600; color: var(--text);
  margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--border);
}
.prose p, .prose ul, .prose ol { margin-bottom: 15px; }
.prose ul { list-style: square; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.3em; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose .lead { font-family: var(--font-display); font-size: 22px; line-height: 1.45; color: var(--text); margin-bottom: 24px; }
.prose .muted { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); }
.contact-email {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px; margin: 4px 0 8px;
  font-family: var(--font-mono); font-size: 18px; font-weight: 500;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.contact-email a { text-decoration: none; }
.contact-email i { color: var(--accent); }

/* ── 404 ── */
.not-found {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--faint); font-family: var(--font-mono);
}
.not-found h1 { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--text); }
.not-found a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Small UI ── */
.kbd {
  font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px;
  background: var(--surface); border: 1px solid var(--ink); border-bottom-width: 2px;
  border-radius: 4px; color: var(--text);
}
.text-btn {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  transition: color 0.15s;
}
.text-btn:hover { color: var(--accent); }