/* FunkyCore / Core identity. Loaded after the existing layout styles.
   Lime is reserved for the mark and primary actions; reading surfaces stay neutral. */
:root {
  --fc-graphite: #18211f;
  --fc-chalk: #f4f3ec;
  --fc-lime: #c7f36b;
  --fc-pine: #285548;
  --fc-stone: #a4ada5;
  --brand-ink: var(--fc-graphite);
  --brand-teal: var(--fc-pine);
  --fc-primary: var(--fc-lime);
  --fc-primary-hover: #b8e45b;
  --fc-on-primary: var(--fc-graphite);
}

:root[data-theme='light'] {
  /* Readable graphite labels, neutral selection surfaces, fine lime markers. */
  --brand-teal: var(--fc-graphite);
  --bg-0: var(--fc-chalk);
  --bg-1: #fcfbf6;
  --bg-2: #f7f7f0;
  --bg-3: #e9ece3;
  --panel: #fcfbf6;
  --border: #d6dcd2;
  --border-strong: #77877c;
  --text: var(--fc-graphite);
  --text-dim: #4c5a51;
  --text-faint: #59665d;
  --text-mid: var(--text-dim);
  --accent: var(--fc-graphite);
  --accent-strong: var(--fc-graphite);
  --accent-soft: #e9e9e2;
  --accent-glow: transparent;
  --topbar-bg: var(--panel);
  --invert-bg: var(--fc-graphite);
  --invert-text: var(--fc-chalk);
  --fc-on-accent: var(--fc-chalk);
  --fc-focus: var(--fc-graphite);
  --fc-nav-marker: var(--fc-lime);
  --fc-correct: #205b83;
  --fc-correct-soft: #e8f0f7;
  --fc-incorrect: #963f20;
  --fc-incorrect-soft: #f7ece4;
}

:root[data-theme='dark'] {
  /* Neutral charcoal surfaces keep the green identity in the accents.
     Distinct surface levels and brighter borders separate cards and controls. */
  --bg-0: #111214;
  --bg-1: #1c1e22;
  --bg-2: #25272c;
  --bg-3: #30333a;
  --panel: #1c1e22;
  --border: #42464f;
  --border-strong: #858d99;
  --text: #f3f4f6;
  --text-dim: #c4c8d0;
  --text-faint: #a9afb9;
  --text-mid: var(--text-dim);
  --accent: #b6ceba;
  --accent-strong: #d4e4cc;
  --accent-soft: #2b2e33;
  --accent-glow: transparent;
  --topbar-bg: var(--panel);
  --invert-bg: var(--text);
  --invert-text: var(--bg-0);
  --fc-on-accent: var(--bg-0);
  --fc-focus: var(--fc-lime);
  --fc-nav-marker: var(--fc-lime);
  --fc-correct: #93c8ee;
  --fc-correct-soft: #243847;
  --fc-incorrect: #ffb38a;
  --fc-incorrect-soft: #422e27;
}

::selection { background: var(--fc-lime); color: var(--fc-graphite); }
:focus-visible { outline-color: var(--fc-focus); }
/* Preserve dark text even when an older component defines a hover inversion. */
:root .btn.primary,
:root .btn.primary:hover:not(:disabled),
:root .btn.primary:active {
  background: var(--fc-primary);
  border-color: var(--fc-pine);
  color: var(--fc-on-primary);
  box-shadow: none;
}
:root .btn.primary:hover:not(:disabled) { background: var(--fc-primary-hover); }
:root[data-theme='dark'] .btn.primary { border-color: var(--fc-primary); }
.astra-primary-nav button[aria-current='page'] { border-color: var(--fc-nav-marker); }
.astra-context-nav button[aria-current='page'] { border-color: var(--fc-nav-marker); }

/* The wordmark uses the site's existing Barlow Condensed, not a second font. */
.astra-wordmark, .astra-wordmark b { color: var(--text); }
.astra-wordmark { letter-spacing: .015em; }
.astra-logo,
.astra-login .login-card > .logo {
  background: var(--fc-graphite);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.astra-logo img, .astra-brand .astra-logo img { filter: none; }
.astra-drawer-brand { display: flex; align-items: center; gap: 10px; }
.astra-drawer-brand img {
  display: block;
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 10px;
  background: var(--fc-graphite);
  border: 1px solid var(--border-strong);
}
.astra-app .sidebar .brand-text .name em,
.astra-login .login-card > h1 em { color: var(--text); font-style: normal; }
.astra-login .login-card > .logo { padding: 4px; }

/* Keep learning copy in the existing readable body face, including injected styles. */
html #page-root .q-text {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: normal;
}
html #page-root .option { line-height: 1.65; }
/* Explicit labels already exist in the exam feedback. Add distinct shapes too,
   and use blue/orange for outcomes rather than relying on red/green alone. */
html #page-root .option.correct,
html #page-root .feedback-box.correct {
  border-color: var(--fc-correct);
  background: var(--fc-correct-soft);
}
html #page-root .option.incorrect,
html #page-root .feedback-box.incorrect {
  border-color: var(--fc-incorrect);
  background: var(--fc-incorrect-soft);
}
html #page-root .option.correct .opt-letter,
html #page-root .feedback-box.correct .feedback-title { color: var(--fc-correct); }
html #page-root .option.incorrect .opt-letter,
html #page-root .feedback-box.incorrect .feedback-title { color: var(--fc-incorrect); }
html #page-root .option.correct::after { content: '\2713'; color: var(--fc-correct); }
html #page-root .option.incorrect::after { content: '\00d7'; color: var(--fc-incorrect); }
html #page-root .option.correct::after,
html #page-root .option.incorrect::after { margin-left: auto; font-weight: 800; flex-shrink: 0; }
.fanki-btn-good:hover, .fanki-tagpick .chip.on { color: var(--fc-on-accent); }

/* Keep the approved light logo on chalk; the original UI palette stays intact. */
:root[data-theme='light'] .astra-logo,
:root[data-theme='light'] .astra-drawer-brand img,
:root[data-theme='light'] .astra-login .login-card > .logo {
  background: var(--fc-chalk);
  border-color: var(--border);
}

/* Match the existing narrow dark-mode accent shapes without adding fills.
   Lime is for decorative rules/progress; text and control outlines stay legible. */
:root[data-theme='light'] .astra-daily-focus {
  border-inline-start-color: var(--fc-lime);
}
:root[data-theme='light'] .uni-coach.sc-workspace .sc-session-card {
  border-top-color: var(--fc-lime);
}
:root[data-theme='light'] #page-root[data-university] .uni-tabs .tab.active,
:root[data-theme='light'] .uni-coach.sc-workspace .sc-tab-button.active {
  border-bottom-color: var(--fc-lime);
}
:root[data-theme='light'] #page-root .progress:not(.red):not(.amber) > i {
  background: var(--fc-lime);
}
:root[data-theme='light'] .uni-coach .sc-multi-fill {
  /* Match the existing important declaration in university.css. */
  background: var(--fc-lime) !important;
}
:root[data-theme='light'] .btn.primary,
:root[data-theme='light'] .btn.primary:hover:not(:disabled),
:root[data-theme='light'] .btn.primary:active {
  border-color: var(--fc-primary);
}