/* i100: a charcoal interface with the three hero colors as accents. */
:root {
  color-scheme: dark;
  --background: #202124;
  --surface: #292a2d;
  --surface-raised: #303134;
  --ink: #e8eaed;
  --muted: #bdc1c6;
  --line: #45464a;
  --wash: #303134;
  --teal: #70dfa8;
  --teal-dark: #9becc1;
  --purple: #93b4ff;
  --gold: #d4ac82;
  --mint: #273d32;
  --purple-wash: #2c3549;
  --gold-wash: #403927;
  --hero-green: #64dca6;
  --hero-blue: #93b4ff;
  --hero-gold: #d4ac82;
}
.emotional { --system-color: var(--hero-green); }
.execution { --system-color: var(--hero-blue); }
.motivation { --system-color: var(--hero-gold); }
body { background: var(--background); }
button, input, select { color: inherit; }
input::placeholder { color: #9aa0a6; opacity: 1; }
::selection { background: #416353; color: #fff; }
.header { background: #202124f5; border-bottom-color: var(--line); }
.brand { width: 176px; height: 80px; flex-shrink: 0; gap: 0; }
.brand .hero-logo { width: 100%; height: 100%; object-fit: contain; }
.footer-brand { width: 136px; height: 60px; flex-shrink: 0; }
.footer-brand img { width: 100%; height: 100%; object-fit: contain; }
.hero, .test-intro { background: #26272a; }
.test-brief, .question, .profile-card, .character-card, .axis-tile,
.subaxis-card, .combination-details, .secondary, .search-field,
.filter-row input, .filter-row select { background: var(--surface); border-color: var(--line); }
.axis-tile, .subaxis-card { border-top-color: var(--system-accent); }
.header-cta { background: var(--mint); }
.header-cta:hover { background: #314f3e; }
button.primary, a.primary { background: var(--teal); border-color: var(--teal); color: #153526; }
button.primary:hover, a.primary:hover { background: var(--teal-dark); }
.secondary:hover { background: var(--surface-raised); }
.skip { background: var(--surface-raised); color: var(--ink); }
.note-symbol { border-color: #526259; }
.test-brief { box-shadow: 0 3px 12px #00000012; }
.progress-track { background: #3a3c40; }
.question { box-shadow: none; }
.question legend .qnumber { background: #343b49; color: #c6d5f2; }
.answer-tile { background: #303134; border-color: #74777d; }
.answer-number { color: #d2d7df; }
.choice:hover .answer-tile { background: #314a3d; border-color: var(--hero-green); }
.choice input:checked + .answer-tile { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 3px #70dfa820; }
.answer-tile > svg { stroke: #153526; }
.question.missing { background: #3c2b29; border-color: #d89a8b; }
.question.missing .answer-tile { background: #3b3332; }
.question.missing .choice input:checked + .answer-tile { background: var(--teal); }
.error-message { color: #ffb4a8; }
.profile-card { border-bottom-color: #55575d; }
.profile-card:hover, .profile-card:focus-within, .character-card:hover { box-shadow: 0 12px 28px #00000026; }
.card-action { background: #26272a; }
.profile-tooltip { background: #35383e; border: 1px solid #62666d; color: var(--ink); box-shadow: 0 16px 36px #00000055; }
.profile-tooltip > p, .tooltip-characteristics p { color: #d9dce2; }
.signature-separator { color: #8e939b; }
.profile-hero { background: linear-gradient(115deg, #26332e, #282e39 67%, #343127); }
.profile-reading p, .profile-reading li { color: #c9cdd3; }
.axis-tile > div span { color: #e8eaed; }
.portrait, .portrait.tone-0 { background: #2c3549; color: #a9b9db; }
.portrait.tone-1 { background: #273d32; color: #a6ccb7; }
.portrait.tone-2 { background: #403927; color: #d7c59b; }
.about-reading aside { background: var(--mint); }
.pole-divider { color: #aeb3bb; }
.footer { background: #1d1e21; }
@media (max-width: 700px) {
  .header { padding-top: 8px; }
  .brand { width: 146px; height: 64px; }
  .header nav { margin-top: 2px; }
  .footer-brand { width: 124px; height: 54px; }
}