/* Match the hub while preserving Twurdle's semantic letter colors. */
:root {
  color-scheme: light;
  font-family: var(--cbh-font-body);
  --bg: var(--cbh-bg);
  --ink: var(--cbh-text);
  --line: var(--cbh-border-strong);
  --correct: #39783d;
  --present: #896c16;
  --absent: #626165;
}

h1, h2 {
  font-family: var(--cbh-font-heading);
  font-weight: 600;
  letter-spacing: -.02em;
}

header { border-color: var(--cbh-border); padding-inline: 52px; }
.start-screen { padding-top: max(76px, env(safe-area-inset-top)); }
.tagline, .meta, .footer, .legend,
.start-screen p, .start-screen .start-tagline, dialog p {
  color: var(--cbh-text-secondary);
}
.status, .race-timer { color: var(--cbh-text); }
.race-timer.urgent { color: var(--cbh-danger); }
.turtle { color: var(--correct); }

.icon-button, .action, .length-option {
  background: var(--cbh-surface);
  border-color: var(--cbh-border-strong);
  color: var(--cbh-text);
}
.action { border-radius: var(--cbh-radius-pill); }
.length-option {
  border-radius: var(--cbh-radius-small);
  box-shadow: var(--cbh-shadow-card);
}
.icon-button:hover, .action:hover, .length-option:hover {
  background: var(--cbh-bg-secondary);
}
.new-puzzle, .race-toggle[aria-pressed="true"], .length-option:active {
  background: var(--cbh-accent);
  border-color: var(--cbh-accent);
  color: var(--cbh-accent-text);
  box-shadow: none;
}
.new-puzzle:hover, .race-toggle[aria-pressed="true"]:hover {
  background: var(--cbh-accent-dark);
}
.text-button { color: var(--cbh-text); text-decoration: underline; text-underline-offset: 3px; }
button:focus-visible { outline: 2px solid var(--cbh-text); outline-offset: 3px; }

.tile { background: var(--cbh-surface); border-radius: 5px; }
.tile.filled { border-color: var(--cbh-text-secondary); }
.key { background: #e4e1dc; color: var(--cbh-text); }
.key:hover { filter: brightness(.96); }
.key[data-key="Enter"] { border-color: var(--cbh-border-strong); background: var(--cbh-accent); }
.key[data-key="Backspace"] { border-color: var(--cbh-border-strong); }
.tile.correct, .tile.present, .tile.absent,
.key.correct, .key.present, .key.absent, .example span {
  color: var(--cbh-text-invert);
}

dialog {
  background: var(--cbh-surface);
  border-color: var(--cbh-border);
  border-radius: var(--cbh-radius-card);
  box-shadow: var(--cbh-shadow-raised);
}
dialog::backdrop { background: rgba(55, 23, 26, .4); }
.result-dialog .result-score { color: var(--correct); }