/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Design Tokens ──────────────────────────────────── */
:root {
  --sans: 'Source Sans Pro', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'Google Sans Code', monospace;
  --bg: #faf9f7;
  --surface: #f2f0eb;
  --border: #e3e0d8;
  --border-strong: #ccc9bf;
  --ink: #1a1917;
  --ink-2: #4a4843;
  --ink-3: #8a8780;
  --accent: #c4580a;
  --accent-bg: #fdf1e8;
  --dark: #18171a;
  /* Code block tokens — Solarized Light */
  --code-bg: #fdf6e3;
  --code-fg: #657b83;
  --code-comment: #93a1a1;
  --code-keyword: #859900;
  --code-string: #2aa198;
  --code-type: #268bd2;
  --code-number: #cb4b16;
  --code-prop: #268bd2;
  --code-fn: #268bd2;
  --code-op: #657b83;
  /* Callout tokens */
  --warn-bg: #fdf6e3;
  --warn-border: #e8d080;
  /* Semantic status colors (used in lesson components) */
  --green: #639922;
  --amber: #9a7a00;
  --red: #a32d2d;
  --red-bg: #1f1010;
  --red-border: #3a1515;
  --green-bg: #111a0d;
  --green-border: #1e3012;
  --blue-bg: #0d1520;
  --blue-border: #152035;
  --backdrop: rgba(250, 249, 247, 0.95);
}

/* ─── Base ────────────────────────────────────────────── */
html { font-size: 20px; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); font-weight: 300; line-height: 1; min-height: 100vh; }

/* ─── Header ─────────────────────────────────────────── */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 20;
}

.brand {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
}

.header-nav { display: flex; gap: 2rem; list-style: none; }

.header-nav a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.header-nav a:hover { color: var(--ink); }
.header-nav a.current { color: var(--ink); }

/* ─── Footer ─────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 2.5rem;
}

.footer-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.footer-links { display: flex; gap: 1.75rem; list-style: none; }

.footer-links a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover { color: var(--ink); }

.footer-version {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  opacity: 0.6;
}

.footer-attribution a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-attribution a:hover { color: var(--ink); }

/* ─── Mobile lesson nav bar ──────────────────────────── */
.mob-nav {
  display: none;
}

@media (max-width: 960px) {
  .mob-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--backdrop);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.5rem;
  }

  .mob-nav-arrow {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--ink-2);
    text-decoration: none;
    line-height: 1;
    transition: color 0.12s;
  }

  .mob-nav-arrow:hover { color: var(--accent); }
  .mob-nav-arrow.hidden { visibility: hidden; }

  .mob-nav-counter {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
  }
}

/* ─── Theme toggle ───────────────────────────────────── */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s;
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink); }

/* ─── Dark theme — Solarized Dark ───────────────────── */
html.dark {
  --bg:           #002b36;
  --surface:      #073642;
  --border:       #1d3d47;
  --border-strong:#586e75;
  --ink:          #fdf6e3;
  --ink-2:        #eee8d5;
  --ink-3:        #93a1a1;
  --accent:       #cb4b16;
  --accent-bg:    #1a1208;
  --dark:         #001f29;
  --backdrop:     rgba(0, 43, 54, 0.95);
  --code-bg:      #002b36;
  --code-fg:      #839496;
  --code-comment: #586e75;
  --warn-bg:      #1a1700;
  --warn-border:  #4a3d00;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
  .site-header { padding: 1rem 1.5rem; }
  .site-footer { padding: 1.75rem 1.5rem; }
}