/* Wunder brand foundation
 * Approved palette: ink, cream, cobalt, sky, lilac, amber, orange.
 * Display/wordmark: Alan Sans. Interface/body: Funnel Sans.
 */
@font-face {
  font-family: "Alan Sans";
  src: url("fonts/AlanSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("fonts/FunnelSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("fonts/FunnelSans-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --brand-ink: #121921;
  --brand-cream: #f4f1e8;
  --brand-cobalt: #4164fe;
  --brand-sky: #7dc3ff;
  --brand-lilac: #b49df8;
  --brand-amber: #ffb52e;
  --brand-orange: #fe6337;

  --font-display: "Alan Sans", "Arial Rounded MT Bold", Arial, sans-serif;
  --font-ui: "Funnel Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg: var(--brand-cream);
  --panel: #fffdf8;
  --panel2: #eeeae0;
  --line: #ccd0cf;
  --text: var(--brand-ink);
  --muted: #505a60;
  --dim: #656d6f;
  --accent: var(--brand-cobalt);
  --accent2: var(--brand-amber);
  --good: #176b9d;
  --bad: #bd492c;
  --warn: #9b6500;

  /* Compatibility aliases for existing public surfaces. */
  --ink: var(--brand-ink);
  --paper: var(--brand-cream);
  --card: var(--panel);
  --card2: var(--panel2);
  --gold: var(--brand-amber);
  --blue: var(--brand-cobalt);
  --violet: var(--brand-cobalt);
  --violet2: var(--brand-lilac);
  --sky: var(--brand-sky);
  --peach: var(--brand-orange);
  --green: var(--brand-sky);

  font-family: var(--font-ui);
}

/* Covers standalone/PWA overscroll as well as the first app paint. */
html { background: var(--brand-cream); }

html[data-theme="dark"] {
  --bg: var(--brand-ink);
  --panel: #19222d;
  --panel2: #222e3b;
  --line: #344150;
  --text: var(--brand-cream);
  --muted: #a8afb1;
  --dim: #7c858b;
  --accent: var(--brand-cobalt);
  --accent2: var(--brand-amber);
  --good: var(--brand-sky);
  --bad: var(--brand-orange);
  --warn: var(--brand-amber);
  --ink: var(--brand-ink);
  --paper: var(--brand-cream);
  --card: var(--panel);
  --card2: var(--panel2);
  --gold: var(--brand-amber);
  --blue: var(--brand-cobalt);
  --violet: var(--brand-cobalt);
  --violet2: var(--brand-lilac);
  --sky: var(--brand-sky);
  --peach: var(--brand-orange);
  --green: var(--brand-sky);
  background: var(--brand-ink);
}

html[data-theme="light"] {
  --bg: var(--brand-cream);
  --panel: #fffdf8;
  --panel2: #e8edf2;
  --line: #ccd0cf;
  --text: var(--brand-ink);
  --muted: #56616a;
  --dim: #656d6f;
  --accent: var(--brand-cobalt);
  --accent2: #c77d00;
  --good: #176b9d;
  --bad: #c43d1f;
  --warn: #9b6500;
  --ink: var(--brand-ink);
  --paper: var(--brand-cream);
  --card: var(--panel);
  --card2: var(--panel2);
  --gold: #c77d00;
  --blue: var(--brand-cobalt);
  --violet: var(--brand-cobalt);
  --violet2: #7257d8;
  --sky: #176b9d;
  --peach: #c43d1f;
  --green: #176b9d;
  background: var(--brand-cream);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-ui);
}

/* The application canvas is an explicit brand surface, not a near-black generic backdrop. */
html[data-theme="dark"] body.web {
  background:
    radial-gradient(920px 620px at 88% -8%, color-mix(in srgb, var(--brand-cobalt) 28%, transparent), transparent 62%),
    radial-gradient(780px 560px at -8% 108%, color-mix(in srgb, var(--brand-lilac) 16%, transparent), transparent 64%),
    radial-gradient(520px 360px at 48% 112%, color-mix(in srgb, var(--brand-amber) 8%, transparent), transparent 66%),
    linear-gradient(155deg, #121921, #0d131a 72%);
}

html[data-theme="dark"] body.web .topbar {
  background: color-mix(in srgb, var(--brand-ink) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--brand-sky) 15%, transparent);
}

body.web,
html[data-theme="light"] body.web {
  background:
    radial-gradient(980px 660px at 88% -10%, color-mix(in srgb, var(--brand-sky) 34%, transparent), transparent 62%),
    radial-gradient(760px 520px at -10% 108%, color-mix(in srgb, var(--brand-lilac) 20%, transparent), transparent 64%),
    radial-gradient(460px 320px at 52% 108%, color-mix(in srgb, var(--brand-amber) 13%, transparent), transparent 68%),
    var(--brand-cream);
}

body.web .topbar,
html[data-theme="light"] body.web .topbar {
  background: color-mix(in srgb, var(--brand-cream) 86%, transparent);
  border-bottom-color: color-mix(in srgb, var(--brand-cobalt) 14%, transparent);
}

h1,
h2,
.display-type,
.hero-title,
.ag-h1,
.onb-hero h1,
.empty-hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "wght" 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  font-variation-settings: "wght" 400;
  letter-spacing: -0.025em;
}

h3,
h4,
h5,
h6,
.eyebrow,
.kicker,
.section-label {
  font-family: var(--font-ui);
  font-weight: 500;
}

p,
li,
.body-copy {
  text-wrap: pretty;
}

.tb-word,
.brand-wordmark,
.ag-brand,
.brand,
.logo {
  font-family: var(--font-display);
  font-variation-settings: "wght" 750;
  letter-spacing: -0.035em;
}

/* Learner shell — cream is intentionally quiet. These shared surfaces use whitespace and
 * editorial dividers in place of the inherited blue-gray glass-card treatment. */
html[data-theme="light"] {
  --panel: #fffdf8;
  --panel2: #eeeae0;
  --line: color-mix(in srgb, var(--brand-ink) 14%, transparent);
  --muted: #505a60;
  --dim: #656d6f;
  --accent2: #9b6500;
  --good: #176b9d;
  --bad: #bd492c;
  --warn: #9b6500;
}

html[data-theme="light"] body.web {
  background:
    radial-gradient(920px 620px at 94% -12%, color-mix(in srgb, var(--brand-sky) 30%, transparent), transparent 64%),
    radial-gradient(760px 520px at -12% 110%, color-mix(in srgb, var(--brand-lilac) 18%, transparent), transparent 65%),
    radial-gradient(440px 300px at 50% 112%, color-mix(in srgb, var(--brand-amber) 10%, transparent), transparent 70%),
    var(--brand-cream);
}

html[data-theme="light"] body.web .topbar,
html[data-theme="light"] .sidebar {
  background: color-mix(in srgb, var(--brand-cream) 91%, transparent);
  border-color: color-mix(in srgb, var(--brand-ink) 12%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] .page-head h2,
html[data-theme="light"] .t2-wel-title,
html[data-theme="light"] .orb-ask {
  font-family: var(--font-display);
  font-variation-settings: "wght" 650;
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .acct-menu,
html[data-theme="light"] .notif-pop,
html[data-theme="light"] .tray,
html[data-theme="light"] .course-card,
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .empty-hero,
html[data-theme="light"] .profile-hero,
html[data-theme="light"] .orb-panel {
  background: color-mix(in srgb, #fffdf8 96%, transparent);
  border-color: color-mix(in srgb, var(--brand-ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.85), 0 14px 30px -26px rgba(18,25,33,.34);
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .course-card,
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .empty-hero,
html[data-theme="light"] .profile-hero { border-radius: 16px; }

html[data-theme="light"] .hero-input,
html[data-theme="light"] .editable,
html[data-theme="light"] .field input,
html[data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=file]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #fffdf8 !important;
  border-color: color-mix(in srgb, var(--brand-ink) 17%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-theme="light"] .hero-input:focus,
html[data-theme="light"] .editable:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--brand-cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 44%, transparent);
}

html[data-theme="light"] .nav-item.active {
  background: color-mix(in srgb, var(--brand-cobalt) 12%, transparent);
  color: var(--brand-ink);
}

html[data-theme="light"] .chip:not(.on),
html[data-theme="light"] .cs-chip:not(.on),
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .switch:not(.on),
html[data-theme="light"] .lib-row,
html[data-theme="light"] .ach-pill {
  background: color-mix(in srgb, #fffdf8 68%, var(--brand-cream));
  border-color: color-mix(in srgb, var(--brand-ink) 11%, transparent);
}

html[data-theme="light"] .lib-row:hover,
html[data-theme="light"] .fr-row:hover,
html[data-theme="light"] .sc-tile:hover {
  background: color-mix(in srgb, var(--brand-sky) 14%, transparent);
}

html[data-theme="light"] .filter-bar .fb-group,
html[data-theme="light"] .filter-bar .fb-sort,
html[data-theme="light"] .pw-menu,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .plan-pick,
html[data-theme="light"] .plan-viewseg {
  background: #fffdf8 !important;
  border-color: color-mix(in srgb, var(--brand-ink) 12%, transparent);
  box-shadow: 0 10px 24px -22px rgba(18,25,33,.4);
}

html[data-theme="light"] .orb-panel { background: color-mix(in srgb, #fffdf8 88%, transparent); }
html[data-theme="light"] .orb-rec-cov { background-color: var(--brand-cream); border-color: color-mix(in srgb, var(--brand-ink) 12%, transparent); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-ink) 22%, var(--brand-cream)); }

/* Light-mode contrast guardrails. These are legacy white-on-dark states whose original
 * foreground no longer follows their surface when the learner chooses cream. Keep white
 * only where the state itself is cobalt or backed by course artwork. */
html[data-theme="light"] .tab.active,
html[data-theme="light"] .doc-view b,
html[data-theme="light"] .en-item.on,
html[data-theme="light"] #navToggle:hover {
  color: var(--brand-ink);
}

html[data-theme="light"] .tab.active {
  background: color-mix(in srgb, var(--brand-cobalt) 12%, transparent);
  border-bottom-color: var(--brand-cobalt);
}

html[data-theme="light"] .en-item.on {
  background: color-mix(in srgb, var(--brand-cobalt) 14%, var(--brand-cream));
  border-color: color-mix(in srgb, var(--brand-cobalt) 42%, var(--line));
}

html[data-theme="light"] .en-item.on .en-no,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .chip.on,
html[data-theme="light"] .seg button.on,
html[data-theme="light"] .pvseg.on,
html[data-theme="light"] .cab-chip.on,
html[data-theme="light"] .cs-chip.on,
html[data-theme="light"] .lf-btn.on,
html[data-theme="light"] .lp-btn.on,
html[data-theme="light"] .t2-send,
html[data-theme="light"] .t2-mic {
  color: #fff;
}

html[data-theme="light"] #navToggle {
  background: #fffdf8;
  border-color: color-mix(in srgb, var(--brand-ink) 17%, transparent);
  color: var(--brand-ink);
}

html[data-theme="light"] .pc-badge,
html[data-theme="light"] .phv,
html[data-theme="light"] .ach-card,
html[data-theme="light"] .faq-it,
html[data-theme="light"] .empty,
html[data-theme="light"] .loading {
  color: var(--brand-ink);
}

html[data-theme="light"] .pc-badge {
  background: color-mix(in srgb, #fffdf8 80%, var(--brand-cream));
  border-color: color-mix(in srgb, var(--brand-ink) 12%, transparent);
}

html[data-theme="light"] .empty,
html[data-theme="light"] .loading,
html[data-theme="light"] .ach-d,
html[data-theme="light"] .faq-a {
  color: var(--muted);
}

html[data-theme="light"] :focus-visible {
  outline: 3px solid var(--brand-cobalt);
  outline-offset: 2px;
}

/* Paper-surface status ink. These labels originally borrowed luminous night-mode
 * colors; in cream they need their own darker foregrounds, paired with a tint. */
html[data-theme="light"] .st-saved { color: #8f2445; background: color-mix(in srgb, #e0537a 14%, var(--brand-cream)); }
html[data-theme="light"] .st-prog { color: #245da8; background: color-mix(in srgb, #5b8def 16%, var(--brand-cream)); }
html[data-theme="light"] .st-read { color: #12685f; background: color-mix(in srgb, #3fb6a8 16%, var(--brand-cream)); }
html[data-theme="light"] .st-done { color: #1d7040; background: color-mix(in srgb, #3fb66a 16%, var(--brand-cream)); }
html[data-theme="light"] .st-gen { color: #815800; background: color-mix(in srgb, #e0a53c 16%, var(--brand-cream)); }

html[data-theme="light"] .uni-plan-status .ups-pill.good { color: #176b47; background: color-mix(in srgb, #2fbf71 16%, var(--brand-cream)); }
html[data-theme="light"] .uni-plan-status .ups-pill.bad { color: #815800; background: color-mix(in srgb, #e0a93c 16%, var(--brand-cream)); }
html[data-theme="light"] .uni-hero-epic .uh-status { color: var(--brand-ink); }
html[data-theme="light"] .uni-hero-epic .uh-week span { color: var(--muted); }
html[data-theme="light"] .uni-hero-epic .uh-grad { background: none; -webkit-text-fill-color: var(--brand-ink); color: var(--brand-ink); }

html[data-theme="light"] .phx-tier,
html[data-theme="light"] .phm-tier,
html[data-theme="light"] .phm-lvl,
html[data-theme="light"] .phx-lvl,
html[data-theme="light"] .ach-card.on .ach-pts { color: #815800; }
html[data-theme="light"] .phm-plan { color: #245da8; }

.tb-word,
.brand-wordmark,
.ag-brand,
.brand[data-wordmark],
.logo[data-wordmark] {
  text-transform: lowercase;
}

/* Brand accents stay luminous without turning interface copy into decoration. */
::selection {
  background: color-mix(in srgb, var(--brand-cobalt) 72%, transparent);
  color: white;
}

:focus-visible {
  outline-color: var(--brand-sky);
}