/* Stu identity. Legacy --green is an action alias, not a status colour.
   Personal profile palettes and semantic moderation/presence colours stay independent. */
:root,
:root[data-theme="light"] {
  --mode-canvas: var(--stu-paper);
  --mode-surface: #fffdf8;
  --mode-soft: var(--stu-lilac);
  --mode-text: var(--stu-ink);
  --mode-muted: #686177;
  --mode-line: #ddd7e6;
  --green: var(--stu-violet);
  --ink: var(--mode-text);
  --muted: var(--mode-muted);
  --line: var(--mode-line);
  --cream: var(--mode-canvas);
  --stu-logo: var(--stu-violet);
  font-family: var(--stu-font-body);
}
:root[data-theme="dark"],
:root[data-theme="oled"] {
  --mode-canvas: var(--stu-ink);
  --mode-surface: #29223f;
  --mode-soft: #39304f;
  --mode-text: var(--stu-paper);
  --mode-muted: #c1b8d3;
  --mode-line: #4a405e;
  --green: #bca7ff;
  --ink: var(--mode-text);
  --muted: var(--mode-muted);
  --line: var(--mode-line);
  --cream: var(--mode-canvas);
  --stu-logo: var(--stu-paper);
}
:root[data-theme="oled"] {
  --mode-canvas: #000;
  --mode-surface: #0c0912;
  --mode-soft: #211a30;
  --mode-line: #382e49;
}
body {
  background: var(--mode-canvas);
  color: var(--mode-text);
}
h1,
h2,
h3 {
  font-family: var(--stu-font-display);
}
.brand {
  padding: 0 0 24px;
}
.stu-wordmark {
  display: inline-block;
  width: 116px;
  height: 66px;
  flex-shrink: 0;
  background: var(--stu-logo);
  mask: url("/assets/brand/stu-wordmark.png") center / contain no-repeat;
  -webkit-mask: url("/assets/brand/stu-wordmark.png") center / contain no-repeat;
}
.mobile-brand .stu-wordmark {
  width: 88px;
  height: 50px;
}
.sidebar nav button.selected {
  background: var(--mode-soft);
  color: var(--green);
}
.sidebar nav button:nth-child(2).selected {
  background: var(--stu-lilac);
  color: var(--stu-ink);
}
.sidebar nav button:nth-child(3).selected {
  background: var(--stu-coral);
  color: var(--stu-ink);
}
.sidebar nav button:nth-child(5).selected {
  background: var(--stu-lime);
  color: var(--stu-ink);
}
.hero,
[data-theme="dark"] .hero-copy,
[data-theme="oled"] .hero-copy {
  background: var(--stu-violet);
  color: var(--stu-paper);
}
.hero {
  border-radius: var(--stu-radius-card);
}
.hero-copy > p,
.hero-foot {
  color: var(--stu-paper);
}
.hero .pill {
  background: var(--stu-lilac);
  color: var(--stu-ink);
}
.hero .button.dark {
  background: var(--stu-lime);
  color: var(--stu-ink);
}
.hero .button.dark:hover {
  background: #e4ff94;
}
.hero-sticker {
  background: var(--stu-lime);
  color: var(--stu-ink);
}
.hero-sticker svg {
  color: var(--stu-ink);
}
.button.dark,
[data-theme="dark"] .button.dark,
[data-theme="oled"] .button.dark,
.send-message-button {
  background: var(--stu-violet);
  color: var(--stu-paper);
}
.button.dark:hover,
.send-message-button:hover {
  background: #5127db;
}
.hero .button.dark {
  background: var(--stu-lime);
  color: var(--stu-ink);
}
.send-message-button:disabled {
  background: var(--mode-soft);
  color: var(--mode-muted);
}
.doodle {
  color: var(--green);
}
.ask-card {
  background: var(--mode-soft);
}
.deal-card.green,
.deal-card.yellow {
  background: var(--stu-lime);
  color: var(--stu-ink);
}
.deal-card.peach {
  background: var(--stu-coral);
  color: var(--stu-ink);
}
.deal-card.lilac {
  background: var(--stu-lilac);
  color: var(--stu-ink);
}
.deal-card .button {
  background: var(--stu-ink);
  color: var(--stu-paper);
}
.deal-card {
  border-radius: var(--stu-radius-card);
}
.community-art.peach {
  background: var(--stu-coral);
  color: var(--stu-ink);
}
.community-art.lilac {
  background: var(--stu-lilac);
  color: var(--stu-ink);
}
.message-bubble.mine {
  background: var(--mode-soft);
  border-color: var(--mode-line);
}
.toast {
  background: var(--stu-ink);
  color: var(--stu-paper);
}
.toast > svg {
  color: var(--stu-lime);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--green);
}
input[type="checkbox"],
input[type="range"],
input[type="radio"] {
  accent-color: var(--stu-violet);
}
.page-heading > div > p:not(.eyebrow),
.page-heading > p:not(.eyebrow),
.hero-copy > p,
.post-body,
.message-bubble p {
  font-size: 16px;
  line-height: 1.5;
}
.hero-foot,
.community-card p,
.deal-card p,
.qa-card > p {
  font-size: 14px;
  line-height: 1.5;
}
.page-heading h1 {
  font-weight: 800;
}
@media (max-width: 700px) {
  .hero-copy {
    padding: 24px;
  }
  .hero-foot {
    font-size: 12px;
  }
}