/* Coastal comparison. Shared components and behavior remain in style.css/app.js. */
:root {
  --primary: #146773;
  --ink: #173e52;
  --paper: #f8fbfc;
  --sage: #d9efec;
  --stone: #f1e8d8;
  --muted: #506770;
  --line: #cbdde0;
  --thumb: #71999e;
  --thumb-hover: #477b83;
  --thumb-active: #146773;
  --sky: #dcecf4;
  --dune: #bc975b;
  --ocean-shadow: #173e5217;
}
.site-header { border-bottom-color: var(--line); }
.hero-art { background: var(--sky); }
.star { color: var(--primary); }
.paper { box-shadow: 0 16px 35px var(--ocean-shadow); }
.annotation { box-shadow: 0 6px 10px var(--ocean-shadow); }
.annotation.two { background: var(--stone); color: var(--ink); }
.benefit:nth-child(3) { background: var(--sky); }
.instructor-note { background: var(--ink); }
.instructor-note .key-mark { color: var(--stone); }
.instructor-note p { color: var(--sage); }
.instructor-name { border-top-color: var(--dune); }
.slots-pane { background: var(--paper); }
.footer { background: var(--sky); }
.admin-header { background: var(--paper); }
.stat:nth-child(2) { background: var(--sage); }
.stat:nth-child(3) { background: var(--sky); }