/* v0.15: Design Kit tokens (data/design_tokens.json) applied over the existing layout — colours,
   hairlines, radii and shadows only, so the measured phone/desktop layouts stay unchanged. */
:root {
  --mm-bg: #f6f1e5;
  --mm-surface: #fffcf3;
  --mm-surface-2: #fff7e3;
  --mm-text: #123f38;
  --mm-secondary: #526a60;
  --mm-emerald: #087d6c;
  --mm-emerald-deep: #065f52;
  --mm-mint: #dbefe3;
  --mm-gold: #f5c45d;
  --mm-gold-deep: #d9a63c;
  --mm-line: #ded9c8;
  --mm-gold-line: #e6cb86;
  --mm-shadow: 0 6px 22px rgba(18, 63, 56, 0.1);
  --mm-shadow-soft: 0 3px 12px rgba(18, 63, 56, 0.08);
}
body {
  background: var(--mm-bg);
  color: var(--mm-text);
}
h1,
h2,
h3,
.turn-content h2,
.page-title h1 {
  color: var(--mm-text);
}
p,
.quiet,
small {
  color: var(--mm-secondary);
}
.topbar,
.sidebar {
  background: var(--mm-surface);
  border-color: var(--mm-line);
}
.wallet,
.level-block,
.music-button,
.topbar .avatar {
  background: var(--mm-surface);
  border-color: var(--mm-gold-line);
  box-shadow: var(--mm-shadow-soft);
}
.wallet strong,
.level-block b {
  color: var(--mm-text);
}
.coin-symbol {
  background: linear-gradient(#ffe08a, var(--mm-gold) 55%, var(--mm-gold-deep));
  color: #6b4a00;
  box-shadow: inset 0 1px 0 #fff4c2, 0 1px 2px rgba(107, 74, 0, 0.25);
}
.level-medal {
  background: linear-gradient(#1aa08b, var(--mm-emerald));
  color: #fff;
}
.xp-bar i {
  background: var(--mm-gold);
}
.nav-item.active {
  background: var(--mm-emerald);
  color: #fff;
}
.nav-item.active .icon {
  color: #fff;
}
/* City overlays: ivory cards, one gold hairline, a quiet shadow. */
body[data-screen="city"] .map-toolbar,
body[data-screen="city"] .rivals-hud,
body[data-screen="city"] .city-metrics,
body[data-screen="city"] .turn-card,
.route-tools-body,
.world-controls button {
  background: var(--mm-surface);
  border: 1px solid var(--mm-gold-line);
  box-shadow: var(--mm-shadow);
}
body[data-screen="city"] .turn-card {
  border-radius: 22px;
}
body[data-screen="city"] .city-metrics b {
  color: var(--mm-emerald-deep);
}
.city-switch,
.chip {
  background: var(--mm-surface-2);
  border: 1px solid var(--mm-gold-line);
  color: var(--mm-emerald-deep);
}
.chip.chosen {
  background: var(--mm-mint);
  border-color: var(--mm-emerald);
  color: var(--mm-emerald-deep);
}
.world-controls button {
  color: var(--mm-emerald-deep);
}
.world-controls button:hover:not(:disabled) {
  background: var(--mm-mint);
}
/* Gold decision button and emerald secondary actions, as in the kit's home and buy screens. */
.primary,
body[data-screen="city"] .roll-button {
  background: linear-gradient(#ffe38f, var(--mm-gold) 52%, #e0a93a);
  border: 1px solid #d3a238;
  color: #3a2a06;
  text-shadow: 0 1px 0 #fff0bd;
  box-shadow: inset 0 2px 0 #fff4c6, 0 3px 0 #b7832a, 0 8px 18px rgba(183, 131, 42, 0.22);
}
.primary:hover:not(:disabled),
body[data-screen="city"] .roll-button:hover:not(:disabled) {
  background: linear-gradient(#ffeaa6, #ffd166 52%, #e6b045);
}
.secondary {
  background: var(--mm-surface);
  border: 1px solid var(--mm-gold-line);
  color: var(--mm-emerald-deep);
}
.secondary:hover:not(:disabled) {
  background: var(--mm-mint);
}
.text-button {
  color: var(--mm-emerald);
}
.die-choice {
  background: var(--mm-surface);
  border: 1px solid var(--mm-gold-line);
}
.die-choice:hover {
  background: var(--mm-mint);
  border-color: var(--mm-emerald);
}
.die {
  background: linear-gradient(#fffdf6, #f3ecd8);
  border: 1px solid var(--mm-line);
}
.die i.dot {
  background: var(--mm-emerald-deep);
}
/* Dialogs and the property sheet. */
.modal,
.property-modal {
  background: var(--mm-surface);
  border: 1px solid var(--mm-gold-line);
  box-shadow: 0 24px 70px rgba(18, 63, 56, 0.28);
}
.property-modal .modal-header,
.property-actions {
  background: var(--mm-surface);
}
.business-option.type-tab {
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  color: var(--mm-text);
}
.business-option.type-tab.selected {
  background: var(--mm-mint);
  border: 2px solid var(--mm-emerald);
}
.business-check {
  background: var(--mm-emerald);
}
.business-option strong,
.purchase-costs b,
.business-income {
  color: var(--mm-emerald-deep);
}
.purchase-costs {
  background: var(--mm-surface-2);
  border: 1px solid var(--mm-line);
}
.growth-track {
  background: var(--mm-surface-2);
  border: 1px solid var(--mm-line);
}
.property-actions .primary {
  background: linear-gradient(#ffe38f, var(--mm-gold) 52%, #e0a93a);
  border: 1px solid #d3a238;
  color: #3a2a06;
}
.property-actions .secondary {
  border: 1px solid var(--mm-gold-line);
  color: var(--mm-emerald-deep);
}
.notice {
  background: var(--mm-mint);
  color: var(--mm-emerald-deep);
  border: 1px solid #bfe0d1;
}
#toast {
  background: var(--mm-text);
  color: #fff;
  border: 1px solid #2d5a52;
}
.quest-num,
.contract-card .pill {
  background: var(--mm-mint);
  color: var(--mm-emerald-deep);
}
.completed .quest-num {
  background: var(--mm-emerald);
  color: #fff;
}
.contract-progress i {
  background: var(--mm-gold);
}
.idle-card,
.next-quest,
.quest-row,
.contract-card,
.property-card,
.destination {
  background: var(--mm-surface);
  border-color: var(--mm-gold-line);
}
.movement-status,
.roll-status {
  background: var(--mm-surface);
  border: 1px solid var(--mm-gold-line);
  color: var(--mm-emerald-deep);
  box-shadow: var(--mm-shadow);
}
.world-loader {
  background: var(--mm-surface);
  border: 1px solid var(--mm-gold-line);
  color: var(--mm-emerald-deep);
}
/* Focus rings follow the kit's 3 px emerald ring on every control. */
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
[data-tile]:focus-visible {
  outline: 3px solid rgba(8, 125, 108, 0.55);
  outline-offset: 2px;
}