/* The Quiet Uncanny: night blue-grey, a camel coat for the accent. Dark by default, light follows the system. */
:root {
  --font-head: "Avenir Next", "Segoe UI", Optima, Candara, "Trebuchet MS", system-ui, sans-serif;
  --font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --brand-track: 0.12em; --brand-case: uppercase; --head-track: 0.01em; --radius: 6px;
  --bg: #0f1519; --card: #141c21; --ink: #e2e9ea; --muted: #9db0b5; --rule: #2b3b43;
  --link: #e3b676; --accent: #d9a766; --accent-hover: #ebbf84; --on-accent: #10171b; --accent2: #6fb3b8; --focus: #8fc7ff;
  --pin: #d9a766; --map-bg: #111a1f;
  --plate-bg: #17242b; --plate-ink: #e2e9ea; --plate-edge: #2b3b43; --plate-shadow: 0 6px 22px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --bg: #eef1f0; --card: #f8faf9; --ink: #14222a; --muted: #4c5f66; --rule: #b9c6c8;
    --link: #8a561a; --accent: #8a561a; --accent-hover: #6e4313; --on-accent: #f8faf9; --accent2: #1f5c63; --focus: #0b5cad;
    --pin: #8a561a; --map-bg: #e4ebea; --plate-shadow: 0 6px 18px rgba(20,34,42,0.22); }
}
:root[data-theme="light"] { --bg: #eef1f0; --card: #f8faf9; --ink: #14222a; --muted: #4c5f66; --rule: #b9c6c8;
  --link: #8a561a; --accent: #8a561a; --accent-hover: #6e4313; --on-accent: #f8faf9; --accent2: #1f5c63; --focus: #0b5cad;
  --pin: #8a561a; --map-bg: #e4ebea; --plate-shadow: 0 6px 18px rgba(20,34,42,0.22); }

body { background-image: radial-gradient(ellipse at 80% -10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 55%); background-attachment: fixed; }
h1, h2 { font-weight: 500; }
.kicker { letter-spacing: 0.24em; }
.plate { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 55%); }
.plate-t { font-weight: 500; letter-spacing: 0.04em; }
.plate-t::after { content: ''; display: block; width: 1.6rem; height: 1.6rem; margin: 0.9rem auto 0; border: 1px solid var(--accent); border-radius: 50%; opacity: 0.8; }
.btn { letter-spacing: 0.04em; }
.hero .lead { font-size: 1.3rem; }

:root { --water: #3f7280; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --water: #6aa0a8; } }
:root[data-theme="light"] { --water: #6aa0a8; }