/* BiteLah coastal colour system.
   Cyan communicates information, teal marks selection, lime drives action,
   and coral is reserved for warnings, mistakes and urgent states. */
:root {
  --brand-deep: #071f2f;
  --brand-deep-soft: #123544;
  --brand-ink: #102638;
  --brand-teal: #087f8c;
  --brand-cyan: #69d2e7;
  --brand-lime: #d9ed9b;
  --brand-coral: #ff806b;
  --brand-sand: #faf4e7;
  --brand-white: #ffffff;
  --brand-muted: #647b82;
  --brand-line: #d1dfd5;

  /* Map older page-level tokens onto the shared system. */
  --deep: var(--brand-deep);
  --navy: var(--brand-deep-soft);
  --ink: var(--brand-ink);
  --ink2: var(--brand-deep-soft);
  --paper: var(--brand-sand);
  --white: var(--brand-white);
  --muted: var(--brand-muted);
  --line: var(--brand-line);
  --teal: var(--brand-teal);
  --ocean: var(--brand-teal);
  --water: var(--brand-cyan);
  --sea: var(--brand-cyan);
  --cyan: var(--brand-cyan);
  --mint: var(--brand-cyan);
  --lime: var(--brand-lime);
  --coral: var(--brand-coral);
  --orange: var(--brand-coral);
}

body {
  background-color: var(--brand-sand);
  color: var(--brand-ink);
}

::selection {
  background: var(--brand-cyan);
  color: var(--brand-deep);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--brand-lime);
  outline-offset: 3px;
}

/* Shared navigation and dark canvases. */
.topbar,
.hero,
.game-site-header,
.hub-topbar,
.hub-hero,
.game-site-footer,
.simple-footer {
  background-color: var(--brand-deep) !important;
}

.topbar,
.game-site-header,
.buddy-topbar {
  border-color: #234657 !important;
}

.topbar nav a,
.game-site-back,
.buddy-topbar nav a {
  color: #b7cdd2 !important;
}

.topbar nav a:hover,
.topbar nav a:focus-visible,
.game-site-back:hover,
.game-site-back:focus-visible,
.buddy-topbar nav a:hover,
.buddy-topbar nav a:focus-visible {
  color: var(--brand-white) !important;
}

/* Main forecast: informational cyan, selectable teal, actionable lime. */
.forecast-shell {
  background: var(--brand-sand);
}

.location-card,
.dashboard-grid article,
.dashboard-grid section,
.hourly-card,
.tide-card,
.week-card,
.moon-panel {
  border-color: var(--brand-line);
}

.water-toggle button.active {
  background-color: var(--brand-teal);
  color: var(--brand-white);
}

.confidence i,
.timeline i,
.hour-bar.fair {
  background-color: var(--brand-cyan);
}

.score-ring {
  background: conic-gradient(var(--brand-cyan) 0 calc(var(--score)*1%), #e3e9e5 calc(var(--score)*1%));
}

.condition-icon,
.card-icon,
.country-select > span,
.pin {
  color: var(--brand-teal);
}

.verdict,
.official-weather {
  background: #dff3f1;
  color: #075e68;
}

.positive {
  color: #08766d;
}

.neutral {
  color: #9a6c12;
}

.moon {
  background: var(--brand-cyan);
  box-shadow: 0 0 75px #69d2e735;
}

.phase-disc,
.mini-moon {
  --lime: var(--brand-cyan) !important;
}

.hero-art .live-moon.moon-phase-0 {
  background: var(--brand-deep-soft);
  box-shadow: inset 0 0 0 1px #45616b;
}

.hero-art .live-moon.moon-phase-1 {
  background: var(--brand-deep-soft);
  box-shadow: inset -62px 0 0 var(--brand-cyan), 0 0 75px #69d2e733;
}

.hero-art .live-moon.moon-phase-2 {
  background: linear-gradient(90deg, var(--brand-deep-soft) 0 50%, var(--brand-cyan) 50%);
  box-shadow: 0 0 75px #69d2e733;
}

.hero-art .live-moon.moon-phase-3 {
  background: var(--brand-cyan);
  box-shadow: inset 62px 0 0 var(--brand-deep-soft), 0 0 75px #69d2e733;
}

.hero-art .live-moon.moon-phase-4 {
  background: var(--brand-cyan);
  box-shadow: 0 0 85px #69d2e755;
}

.hero-art .live-moon.moon-phase-5 {
  background: var(--brand-cyan);
  box-shadow: inset -62px 0 0 var(--brand-deep-soft), 0 0 75px #69d2e733;
}

.hero-art .live-moon.moon-phase-6 {
  background: linear-gradient(90deg, var(--brand-cyan) 0 50%, var(--brand-deep-soft) 50%);
  box-shadow: 0 0 75px #69d2e733;
}

.hero-art .live-moon.moon-phase-7 {
  background: var(--brand-deep-soft);
  box-shadow: inset 62px 0 0 var(--brand-cyan), 0 0 75px #69d2e733;
}

.moon-ring {
  border-color: #315262;
}

.water-line {
  background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
}

.playbook {
  background: var(--brand-deep-soft);
}

footer:not(.game-site-footer) {
  background: #041722;
}

/* Dark mode keeps the same semantic colours instead of inventing a second palette. */
html.theme-night {
  color-scheme: dark;
  --paper: #071f2f;
  --ink: #eaf5f4;
  --muted: #a7bdc2;
  --line: #31515d;
  --white: #173f4c;
  --mint: var(--brand-cyan);
}

html.theme-night body,
html.theme-night .forecast-shell {
  background: var(--brand-deep);
  color: #eaf5f4;
}

html.theme-night .dashboard-grid article,
html.theme-night .dashboard-grid section,
html.theme-night .hourly-card,
html.theme-night .tide-card,
html.theme-night .week-card,
html.theme-night .moon-panel,
html.theme-night .location-card {
  background: #123544;
  border-color: #31515d;
  color: #eaf5f4;
}

html.theme-night .condition,
html.theme-night .phase-item,
html.theme-night .day-part,
html.theme-night .more-links a,
html.theme-night .accessibility-controls button {
  background: #173f4c !important;
  border-color: #31515d !important;
}

html.theme-night .water-toggle button.active,
html.theme-night .accessibility-controls button[aria-pressed="true"] {
  background: var(--brand-teal) !important;
  border-color: var(--brand-cyan) !important;
  color: var(--brand-white) !important;
}

html.theme-night .score-ring {
  background: conic-gradient(var(--brand-cyan) 0 calc(var(--score)*1%), #274d58 calc(var(--score)*1%));
}

html.theme-night .score-ring::after {
  background: #123544;
}

@media (display-mode: standalone) {
  body {
    background-color: var(--brand-sand);
  }

  html.theme-night body {
    background-color: var(--brand-deep);
  }
}