/* Soft neutral surfaces, restrained accents and readable foregrounds. */
:root {
  --page: #f1f0ec;
  --surface: #f9f8f5;
  --surface-tint: #eae8e2;
  --ink: #34363a;
  --muted: #626367;
  --line: #d2d0c9;
  --green: var(--accent);
  --lime: #d5d9df;
  --editor-bg: #303236;
  --editor-bar: #3b3e43;
  --editor-ink: #e9e8e4;
  --editor-muted: #c0c2c6;
  --accent: #586579;
  --accent-hover: #465368;
  --on-accent: #f9f8f5;
  --control-border: #94979b;
  --run-ink: #303740;
  --run-hover: #e0e3e7;
  --disabled-bg: #b9bdc3;
  --disabled-ink: #454b54;
  --badge-bg: #e7edf3;
  --badge-ink: #445574;
  --success-bg: #e4ede0;
  --success-ink: #34583c;
  --warning-bg: #f1e9da;
  --warning-ink: #79562a;
  --error-bg: #f1e6e0;
  --error-ink: #884035;
  --selection-bg: #d6dce5;
  --focus: #687fa0;
}

:root[data-theme="warm"] { --page:#f1eadf; --surface:#fbf5eb; --surface-tint:#e9e0d1; --ink:#413b33; --muted:#6d6152; --line:#cec0ab; --accent:#736047; --accent-hover:#5e4d37; --badge-bg:#eee2ce; --badge-ink:#695035; --selection-bg:#dfceb1; }
:root[data-theme="blue"] { --page:#edf1f5; --surface:#f6f8fb; --surface-tint:#e0e7f0; --ink:#303d4e; --muted:#56667a; --line:#c5d0df; --accent:#4d6581; --accent-hover:#3c526c; --badge-bg:#e0e9f4; --badge-ink:#3d5576; --selection-bg:#ccdbee; }
:root[data-theme="lavender"] { --page:#f0edf4; --surface:#f8f6fa; --surface-tint:#e6e0ed; --ink:#3d3548; --muted:#695c76; --line:#cfc5d9; --accent:#695879; --accent-hover:#554463; --badge-bg:#eae1f2; --badge-ink:#624775; --selection-bg:#dacfE4; }
:root[data-theme="dark"] { --page:#25272c; --surface:#303339; --surface-tint:#3b3f47; --ink:#e7e7e4; --muted:#bfc0c4; --line:#626873; --accent:#b8c7dd; --accent-hover:#d0dbee; --on-accent:#252b34; --control-border:#818995; --badge-bg:#424c60; --badge-ink:#e2e9f5; --selection-bg:#49576e; --editor-bg:#23262b; --editor-bar:#30343c; --editor-ink:#e7e8e6; --editor-muted:#bac1ce; --focus:#c4d6f3; --success-bg:#35463a; --success-ink:#d0e6ce; --warning-bg:#514731; --warning-ink:#f4e1b2; --error-bg:#513c3c; --error-ink:#f4cfca; }
:root[data-theme="contrast"] { --page:#17191d; --surface:#202328; --surface-tint:#2c3037; --ink:#faf9f5; --muted:#d4d6dc; --line:#aeb6c2; --accent:#f0d67b; --accent-hover:#ffeba6; --on-accent:#24221c; --control-border:#c0c7d2; --badge-bg:#353f55; --badge-ink:#f1f5ff; --selection-bg:#505f79; --editor-bg:#17191d; --editor-bar:#252930; --editor-ink:#faf9f5; --editor-muted:#d1d8e2; --focus:#f0d67b; --success-bg:#273d30; --success-ink:#e4f5dc; --warning-bg:#4c4028; --warning-ink:#fff0bd; --error-bg:#4c2d2d; --error-ink:#ffe2dc; }
body { background: var(--page); color: var(--ink); }
.site-header, .workspace-bar, .workspace-tabs { background: var(--surface); border-color: var(--line); }
.reading-pane, dialog, .analysis-dialog-head, .reference-detail,
.parent-cards article, .donation-card, .personal-links, .grade-popover {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.coding-pane, .terminal-pane { background: var(--page); }
.mission, .parent-overview, .resume-card, .reference-note, .lesson-purpose,
.lesson-article, .sample-inputs, .support-other { background: var(--surface-tint); border-color: var(--line); }
body > footer.site-footer { background: var(--surface-tint); color: var(--muted); }
.family-page input, .family-page select, .family-page button.grade-trigger,
.grade-popover, .view-panel, .library-filters input, .library-filters select {
  background: var(--surface); color: var(--ink); border-color: var(--control-border);
}
.family-page button.grade-trigger[aria-expanded=true] { background: var(--surface); border-color: var(--accent); }
.grade-number, .grade-trigger .grade-number { background: var(--surface-tint); color: var(--accent); }
.grade-grid [role=option] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.grade-grid [role=option][aria-selected=true] { background: var(--green); color: var(--on-accent); border-color: var(--green); }
.grade-grid [role=option][data-highlighted=true]:not([aria-selected=true]) { background: var(--surface-tint); }
.grade-caption small, .grade-label, .grade-popover-title,
.family-page .grade-popover p { color: var(--muted); }
/* Keep the reading panel light and the coding area dark, without pure white/black. */
.editor, .editor .code-area, .coding-pane #code, .family-page .exam-code {
  background: var(--editor-bg); color: var(--editor-ink); border-color: var(--control-border);
  caret-color: var(--editor-ink);
}
.editor .editor-head { background: var(--editor-bar); color: var(--editor-ink); }
.editor .editor-footer { background: var(--editor-bar); color: var(--editor-muted); border-color: var(--control-border); }
.editor #lines, .editor .code-area > #lines { color: var(--editor-muted); opacity: 1; }
.editor .editor-head button, .editor .editor-footer > span { color: var(--editor-muted); }
.editor .editor-head i { background: var(--editor-muted); }
.terminal-console { background: var(--editor-bg); color: var(--editor-ink); border-color: var(--control-border); }
.terminal-pane #output { background: transparent; color: inherit; }
.terminal-form input { color: var(--editor-ink); caret-color: var(--editor-ink); }
.primary, a.primary, .family-page :is(button.primary, a.primary) {
  background: var(--green); color: var(--on-accent); border-color: var(--green);
}
.primary:not(:disabled):hover, a.primary:hover,
.family-page :is(button.primary, a.primary):not(:disabled):hover { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }
.editor .editor-footer button.primary { background: var(--lime); color: var(--run-ink); border: 1px solid var(--control-border); }
.editor .editor-footer button.primary:not(:disabled):hover { background: var(--run-hover); color: var(--run-ink); }
.editor .editor-footer button.primary:disabled { background: var(--disabled-bg); color: var(--disabled-ink); opacity: 1; }
.python-inline, .study-article :not(pre) > code {
  background: var(--badge-bg); border-color: var(--line); color: var(--badge-ink);
}
.study-article pre, .reference-detail pre, .reading-pane pre { background: var(--surface-tint); color: var(--ink); border-color: var(--line); }
#feedback.success { background: var(--success-bg); color: var(--success-ink); }
#feedback.needs-work { background: var(--warning-bg); color: var(--warning-ink); }
#feedback.wrong, .error-summary { background: var(--error-bg); color: var(--error-ink); }
.editor-help, .coding-pane .editor-help, .save-state, .runtime-note,
.intro-meta, .eyebrow, .page-heading > p, .family-page .save-help { color: var(--muted); }
/* Light selection and a visible keyboard ring instead of luminous accents. */
::selection { background: var(--selection-bg); color: var(--ink); }
.editor ::selection, .terminal-console ::selection { background: var(--accent-hover); color: var(--editor-ink); }
:where(button, a, summary, input, select, textarea):focus-visible { outline-color: var(--focus); }
dialog::backdrop { background: #292d3473; }
.editor :is(button, textarea):focus-visible,
.terminal-console input:focus-visible { outline-color: #a6bdd4; }
.coding-pane .editor-help { font-size: 12px; line-height: 1.7; }
::placeholder { color: var(--muted); opacity: 1; }

/* Learning cards and navigation use neutral surfaces rather than green panels. */
.path-step, .catalog-layout .lesson {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.path-step small, .path-step > span, .catalog-layout .lesson small { color: var(--muted); }
.path-step.upcoming { background: var(--surface-tint); border-color: var(--accent); box-shadow: inset 0 3px var(--accent); }
.path-step:hover, .catalog-layout .lesson:hover { background: var(--surface-tint); border-color: var(--accent); }
.path-step.completed small { color: var(--success-ink); }
.journey-stage, .extended-library { border-color: var(--line); }
.journey-stage > summary { color: var(--ink); }
.course-preview a, .journey-continue, .lesson-source,
.family-page a:not(.primary):not(.button-link) { color: var(--accent); text-decoration-color: var(--accent); }
.lesson-purpose { border-left-color: var(--accent); }
.lesson-purpose span, .parent-cards article p { color: var(--muted); }
.site-header .brand, .site-header > nav a { color: var(--muted); }
.site-header .brand .green, .footer-brand .green { color: var(--accent); }
.site-header .logo, .footer-brand .logo { background: var(--accent); color: var(--on-accent); }
.site-header > nav a.active, .site-header > nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.personal-menu > summary { color: var(--ink); background: var(--surface); border-color: var(--line); }
.personal-menu[open] > summary, .personal-links a[aria-current=page], .personal-links a:hover { background: var(--surface-tint); border-color: var(--accent); }
.personal-links a, .personal-links a > .ui-icon { color: var(--ink); }
.personal-links small, .footer-main nav h2, .footer-intro > p { color: var(--muted); }
.footer-main nav a, .footer-base a, .footer-guide { color: var(--ink); }
.footer-brand { color: var(--ink); }
.family-page :is(button, .button-link) { background: var(--surface); color: var(--ink); border-color: var(--control-border); }
.family-page :is(button, .button-link):not(:disabled):hover { background: var(--surface-tint); border-color: var(--accent); }
.family-page :is(button.primary, a.primary) { background: var(--green); color: var(--surface); border-color: var(--green); }
.family-page :is(button.primary, a.primary):not(:disabled):hover { background: var(--accent-hover); color: var(--surface); }
.family-page .exam-problems button[aria-pressed=true] { background: var(--surface-tint); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.family-page button.grade-trigger[aria-expanded=true] { box-shadow: 0 0 0 3px var(--surface-tint); }
.family-page button.grade-trigger:disabled { background: var(--surface-tint); }

.learning-path, .original-course, .course-preview { background:var(--surface); border-color:var(--line); }
html[data-theme] :is(h1,h2,h3,h4,.brand,.footer-brand) { color:var(--ink); }
html[data-theme] :is(.path-heading p,.journey-stage > summary,.description,.lesson-purpose span,.intro-path small,.parent-cards p) { color:var(--muted); }
html[data-theme] :is(.tip,.library,.catalog-layout aside,.reference-search,.reference-sidebar,.reference-note,.dialog-actions,.thanks-letter,.donation-card,.garden,.garden-info,.garden-preview,.support-mark,.support-other,.donation-pending) { background:var(--surface); color:var(--ink); border-color:var(--line); }
html[data-theme] :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select) { color:var(--ink); background:var(--surface); border-color:var(--control-border); }
html[data-theme] .terminal-form input { background:transparent!important; color:var(--editor-ink); }
html[data-theme] .family-page .grade-popover { background:var(--surface); color:var(--ink); }
html[data-theme] .family-page .grade-grid [role=option] { background:var(--surface); color:var(--ink); border-color:var(--line); }
html[data-theme] .family-page .grade-grid [aria-selected=true] { background:var(--accent); color:var(--on-accent); }
.personal-links .theme-menu-button { display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:14px; border:0; border-radius:10px; background:transparent; color:var(--ink); text-align:left; font:inherit; font-size:15px; cursor:pointer; }
.personal-links .theme-menu-button:hover { background:var(--surface-tint); }
.theme-menu-mark { width:23px; height:23px; flex:none; border-radius:50%; border:2px solid var(--accent); background:linear-gradient(90deg,var(--accent) 50%,transparent 50%); }
.theme-dialog { width:min(720px,calc(100vw - 32px)); max-width:720px; max-height:90dvh; overflow:auto; padding:26px; background:var(--surface); color:var(--ink); }
.theme-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.theme-dialog-heading h2 { margin:6px 0; }
.theme-done { padding:10px 18px; border-radius:9px; border:1px solid var(--control-border); background:var(--surface-tint); color:var(--ink); min-height:44px; }
.theme-dialog > p { color:var(--muted); line-height:1.8; }
.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border:0; margin:20px 0; padding:0; }
.theme-option { position:relative; display:flex; flex-direction:column; gap:9px; padding:14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:var(--surface); color:var(--ink); }
.theme-option.selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--surface-tint); }
.theme-option:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.theme-option input { position:absolute; top:12px; right:12px; accent-color:var(--accent); width:16px; height:16px; margin:0; }
.theme-swatches { display:flex; height:36px; width:calc(100% - 22px); border-radius:7px; overflow:hidden; border:1px solid var(--line); }
.theme-swatches > span { flex:1; }
.theme-option strong { font-size:14px; line-height:1.5; }
.theme-option small { color:var(--muted); font-size:12px; line-height:1.6; }
.theme-save-note { font-size:12px!important; margin-bottom:0; }
@media(max-width:600px) { .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .theme-dialog { padding:20px; } }

html[data-theme] :is(.analysis-reading-options button,.analyze-button,.workspace-bar button,.workspace-view > summary,.paging button,.transfer-actions button,.import-button,.dialog-actions button) { background:var(--surface-tint); color:var(--ink); border-color:var(--control-border); }
html[data-theme] .analysis-reading-options button[aria-pressed=true] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }