:root {
  /* --- OLED-true darks --- */
  --c-black: #000000;
  --c-hull-950: #050708;
  --c-hull-900: #0a0e11;
  --c-hull-850: #0d1216;
  --c-hull-800: #11171b;
  --c-hull-700: #182028;

  /* --- Brass / bronze instrument accents --- */
  --c-brass-100: #f3e2bb;
  --c-brass-300: #e2c584;
  --c-brass-500: #c9a464;
  --c-brass-600: #ad8a4f;
  --c-brass-700: #8a6d3c;
  --c-brass-glow: rgba(201, 164, 100, 0.35);

  /* --- Water / depth accents --- */
  --c-water-300: #8fd9e0;
  --c-water-500: #4fb3c0;
  --c-water-700: #276f7c;
  --c-water-glow: rgba(79, 179, 192, 0.35);

  /* --- Status colours --- */
  --c-good: #6fcf97;
  --c-warn: #e0b45c;
  --c-bad: #d97a6c;

  /* --- Text --- */
  --c-text-100: #f4efe4;
  --c-text-300: #c9c2b2;
  --c-text-500: #8f8977;
  --c-text-700: #59564a;

  /* --- Typography --- */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  /* --- Scale: tuned for a 3840x2160 (4K) fullscreen canvas --- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.4rem;
  --space-6: 5rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --ease-bridge: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 400ms;
  --dur-med: 900ms;
  --dur-slow: 1800ms;
}

/* Scale the whole rem base up for genuine 4K panels; on smaller/lower-DPI
   displays this is harmlessly clamped back down. */
@media (min-width: 2560px) {
  html { font-size: 22px; }
}
@media (min-width: 3800px) {
  html { font-size: 30px; }
}

/* ...and back down for phone-sized screens, in both dimensions - a
   narrow portrait phone and a short landscape one need the same
   treatment for different reasons. Structural reflow lives in
   mobile.css; this is just the proportional scale. */
@media (max-width: 700px) {
  html { font-size: 13px; }
}
@media (max-width: 430px) {
  html { font-size: 11px; }
}
@media (max-height: 500px) {
  html { font-size: 12px; }
}
@media (max-height: 380px) {
  html { font-size: 10px; }
}