/* Generated from parseltongue.core.theme — do not edit by hand. */

:root, [data-theme="dark"] {
  --base:#1e1e2e;--mantle:#181825;--crust:#11111b;--surface0:#313244;--surface1:#45475a;--surface2:#585b70;--overlay0:#6c7086;--text:#cdd6f4;--subtext:#a6adc8;--green:#a6e3a1;--red:#f38ba8;--yellow:#f9e2af;--blue:#89b4fa;--mauve:#cba6f7;--teal:#94e2d5;--peach:#fab387;--flamingo:#f2cdcd;--sky:#89dceb;--lavender:#b4befe;--base-light:#262637;--highlight:rgba(250,204,21,0.30);
}
[data-theme="light"] {
  --base:#f9fafb;--mantle:#ffffff;--crust:#f3f4f6;--surface0:#e5e7eb;--surface1:#d1d5db;--surface2:#9ca3af;--overlay0:#6b7280;--text:#111827;--subtext:#4b5563;--green:#16a34a;--red:#dc2626;--yellow:#ca8a04;--blue:#2563eb;--mauve:#7c3aed;--teal:#0d9488;--peach:#ea580c;--flamingo:#e11d48;--sky:#0284c7;--lavender:#4f46e5;--base-light:#f3f4f6;--highlight:rgba(234,179,8,0.28);
}

/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text); background: var(--base);
  line-height: 1.6; min-height: 100vh;
  transition: background 0.2s, color 0.2s;
}
a { color: var(--lavender); text-decoration: none; }
a:hover { color: var(--mauve); }
code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
}
code {
  background: var(--surface0); padding: 0.15em 0.4em;
  border-radius: 4px;
}
pre {
  background: var(--mantle); padding: 1rem; border-radius: 8px;
  overflow-x: auto; border: 1px solid var(--surface0);
  position: relative;
}
pre code { background: none; padding: 0; border: none; }
[contenteditable],
[contenteditable] * {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}
[contenteditable] { caret-color: var(--text); }

/* ── Typography ── */
h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--lavender); }
.subtitle { color: var(--subtext); font-size: 0.95rem; margin-bottom: 2rem; }
.dim { color: var(--overlay0); font-size: 0.85rem; }

/* Pages-only component styles — palette + base typography are generated
   from parseltongue.core.theme by build.py.  */

/* ── Copy button ── */
.copy-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: var(--surface0); border: 1px solid var(--surface1);
  color: var(--subtext); border-radius: 4px; cursor: pointer;
  font-size: 0.7rem; padding: 0.2em 0.5em;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
  font-family: inherit; z-index: 1;
}
pre:hover .copy-btn, .prompt:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: var(--surface1); color: var(--text); }
.copy-btn.copied { background: var(--green); color: var(--crust); opacity: 1; }

/* ── Prompt block (pastable agent prompt) ── */
.prompt {
  background: var(--crust); border: 1px solid var(--mauve);
  border-radius: 8px; padding: 1.4rem 1rem 1rem; position: relative;
  overflow-x: auto; margin: 0.75rem 0;
}
.prompt::before {
  content: 'prompt'; position: absolute; top: 0.4rem; left: 0.75rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--mauve); font-family: inherit; font-weight: 600;
}
.prompt p {
  margin: 0; padding: 0; font-size: 0.9rem; color: var(--text);
  line-height: 1.5;
}

/* ── Layout ── */
.page { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page-wide { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page h1 { margin-bottom: 0.25rem; }
.page p, .page-wide p { margin: 0.5rem 0; color: var(--subtext); }
.page .subtitle { font-size: 1.15rem; color: var(--lavender); font-weight: 600; margin-bottom: 1rem; }
.page .card-grid, .page-wide .card-grid { margin-top: 1.5rem; }

/* ── Nav bar ── */
.topnav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1.5rem; padding-right: 3.5rem;
  background: var(--mantle); border-bottom: 1px solid var(--surface0);
  position: sticky; top: 0; z-index: 50;
  position: relative;
}
.topnav .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--lavender); }
.topnav .logo svg { width: 24px; height: 24px; }
.topnav nav { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }
.topnav nav a {
  padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.85rem;
  color: var(--subtext); transition: background 0.15s, color 0.15s;
}
.topnav nav a:hover { background: var(--surface0); color: var(--text); }
.topnav nav a.active { background: var(--surface0); color: var(--lavender); }

/* ── Theme toggle ── */
.theme-toggle {
  background: var(--surface0); border: none; color: var(--subtext);
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  position: absolute; top: 0.75rem; right: 1.5rem;
}
.theme-toggle:hover { background: var(--surface1); color: var(--text); }
#theme-icon { font-size: 13px; line-height: 1; font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace; }

/* ── Cards ── */
.card {
  background: var(--surface0); border-radius: 10px;
  padding: 1.25rem 1.5rem; transition: background 0.15s;
}
.card:hover { background: var(--surface1); }
.card h3 { font-size: 1rem; color: var(--lavender); margin-bottom: 0.35rem; }
.card p { font-size: 0.85rem; color: var(--subtext); }
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ── Tabs ── */
.tab-bar { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; }
.tab-btn {
  padding: 0.4rem 0.85rem; border-radius: 6px; border: 1px solid var(--surface1);
  background: var(--surface0); color: var(--subtext);
  font-size: 0.8rem; cursor: pointer; font-family: inherit; font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab-btn .badge { background: none; color: inherit; padding: 0; font-size: inherit; }
.tab-btn:hover { background: var(--surface1); color: var(--text); border-color: var(--surface2); }
.tab-btn.active { background: var(--surface1); color: var(--lavender); border-color: var(--lavender); }
.tab-btn[data-tab="pgmd"].active { color: var(--mauve); border-color: var(--mauve); }
.tab-btn[data-tab="pltg"].active { color: var(--green); border-color: var(--green); }
.tab-btn[data-tab="py"].active { color: var(--blue); border-color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 0.15em 0.5em; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600;
}
.badge-pltg { background: var(--green); color: var(--crust); }
.badge-pgmd { background: var(--mauve); color: var(--crust); }
.badge-py { background: var(--blue); color: var(--crust); }

/* ── Prism syntax highlighting (themed) ── */
code[class*="language-"], pre[class*="language-"] {
  color: var(--text); background: none; text-shadow: none;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
pre[class*="language-"] { background: var(--mantle); }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--overlay0); font-style: italic; }
.token.punctuation { color: var(--subtext); }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--red); }
.token.boolean, .token.number { color: var(--peach); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--green); }
.token.operator, .token.entity, .token.url { color: var(--sky); }
.token.atrule, .token.attr-value, .token.keyword { color: var(--mauve); }
.token.function, .token.class-name { color: var(--blue); }
.token.regex, .token.important, .token.variable { color: var(--yellow); }
.token.decorator { color: var(--peach); }
.token.triple-quoted-string { color: var(--green); }