:root {
  --ink: #303536;
  --paper: #FFF9ED;
  --outer: #DCE8E4;
  --navy: #344B61;
  --blue: #2A9F9B;
  --blue-dark: #177F7C;
  --orange: #F07878;
  --orange-dark: #E26669;
  --pink: #F9D8D3;
  --mint: #CFE8E5;
  --line: #858B88;
}

body { background-color: var(--outer); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 3px; }
.browser-window { border-color: var(--line); box-shadow: 11px 13px rgb(23 127 124 / 17%); }
.titlebar { background: var(--blue); }
.titlebar-dots i:nth-child(1) { background: var(--orange); }
.titlebar-dots i:nth-child(3) { background: var(--mint); }
.sidebar { background: var(--pink); }
.brand small, .nav-label, .card-kicker, .eyebrow, .nav-list a > span { color: var(--orange-dark); }
.nav-list a:hover, .nav-list a:focus-visible, .nav-list a.is-current { background: var(--mint); }
.nav-list small, .counter, .status-line, .intro, .room-card > p:not(.card-kicker), .room-card blockquote { color: #555d5d; }
.counter strong { background: var(--navy); }
.status-line i { background: var(--orange); }
.enter-link, .status-line a { color: var(--blue-dark); }
.window-scene { box-shadow: 8px 9px rgb(42 159 155 / 21%); }
.weather { background: linear-gradient(#9ed7d2, #fff0cd); }
.window-scene[data-period=morning] .weather { background: linear-gradient(#bfe7e3, #f9d8d3); }
.window-scene[data-period=sunset] .weather { background: linear-gradient(#2A9F9B, #f9d8d3 58%, #F07878); }
.new-badge { background: var(--orange-dark); }
.diary-card { background: var(--mint); }
.museum-card { background: var(--pink); }
footer { background: var(--mint); color: #465657; }
.outside-note { color: #4a6e6d; }
.window-line, .sill { background: var(--paper); }