/* ── Semantic color tokens ─────────────────────────────────
   RGB channels only — Tailwind uses these with / opacity syntax
   e.g. bg-surface/50 = background: rgb(var(--surface) / 0.5)
──────────────────────────────────────────────────────────── */
:root {
  --bg:       255 255 255;
  --surface:  245 245 247;
  --card:     255 255 255;
  --border:   0 0 0;          /* used at low opacity */
  --ink:      29 29 31;
  --muted:    110 110 115;
  --accent:   0 113 227;
}

.dark {
  --bg:       7 7 15;
  --surface:  13 13 26;
  --card:     17 17 31;
  --border:   255 255 255;    /* used at low opacity */
  --ink:      245 245 247;
  --muted:    107 107 138;
  --accent:   41 151 255;
}

/* ── Base ──────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Maven Pro', system-ui, sans-serif; background: rgb(var(--bg)); color: rgb(var(--ink)); }
h1, h2, h3, h4, h5, h6 { font-family: 'Google Sans Flex', system-ui, sans-serif; }
[x-cloak] { display: none !important; }

/* ── Button system ─────────────────────────────────────────── */

/* Primary — clean solid with glow */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 24px; border-radius: 980px;
  background: rgb(var(--accent));
  color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 4px 16px rgb(var(--accent) / 0.25);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgb(var(--accent) / 0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); filter: brightness(1); }

/* Secondary — frosted glass */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 24px; border-radius: 980px;
  background: rgb(var(--border) / 0.06);
  color: rgb(var(--ink));
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid rgb(var(--border) / 0.12);
  cursor: pointer; text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:hover {
  background: rgb(var(--border) / 0.10);
  border-color: rgb(var(--border) / 0.20);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.btn-secondary:active { transform: translateY(0); }

/* Ghost — text only, underline on hover */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 0;
  font-size: 14px; font-weight: 600; font-family: inherit;
  color: rgb(var(--accent));
  background: none; border: none; cursor: pointer; text-decoration: none;
  transition: gap 0.18s ease, opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-ghost:hover { gap: 8px; opacity: 0.8; }

/* Small variants */
.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-xs { padding: 5px 12px; font-size: 12px; }

/* ── Prose (markdown) ──────────────────────────────────────── */
.prose { max-width: 680px; font-size: 17.5px; line-height: 1.82; color: rgb(var(--ink)); }
.prose h1,.prose h2,.prose h3,.prose h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 1.6em 0 0.5em; color: rgb(var(--ink)); }
.prose h1 { font-size: 2em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.2em; }
.prose p { margin: 1em 0; }
.prose a { color: rgb(var(--accent)); text-decoration: none; }
.prose a:hover { opacity: 0.8; }
.prose code { background: rgb(var(--border) / 0.08); padding: 2px 6px; border-radius: 5px; font-size: 0.87em; }
.prose pre { background: rgb(var(--surface)); border: 1px solid rgb(var(--border) / 0.10); border-radius: 14px; padding: 22px; overflow-x: auto; margin: 1.5em 0; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 2px solid rgb(var(--accent)); padding-left: 20px; margin: 1.5em 0; opacity: 0.75; font-style: italic; }
.prose ul,.prose ol { padding-left: 1.5em; margin: 1em 0; }
.prose li { margin: 0.4em 0; }
.prose hr { border: none; border-top: 1px solid rgb(var(--border) / 0.10); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th,.prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgb(var(--border) / 0.08); }
.prose th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5; }

/* ── Poem ──────────────────────────────────────────────────── */
.poem-line { line-height: 2.2; font-family: Georgia, serif; font-style: italic; color: rgb(var(--ink)); }