/* ==========================================================================
   Shared theme tokens.

   The Profile app (Profile/css/main.css) is the source of truth for this
   palette — these values are kept identical to it on purpose, so the two
   sites read as one product. If a colour changes there, change it here too.

   Previously this app declared its own five-colour set with different names
   for the same values, and one outright clash: --accent meant #dee2e6 here
   and #a8dadc in Profile. The Profile names win.

     was --primary    -> --primary-color    (same value)
     was --secondary  -> --primary-dark     (value corrected, #264e86 -> #3d6d8a)
     was --ternary    -> --accent-color     (same value; also fixes the spelling)
     was --accent     -> --border-color     (same value, honest name)
     was --danger     -> --highlight-color  (same value; it was never a "danger" red)
   ========================================================================== */

:root {
  --primary-color: #457b9d;
  --primary-dark: #3d6d8a;
  --accent-color: #a8dadc;
  --accent-light: #d4e8eb;
  --highlight-color: #de4463;

  --bg-body: #f8f9fa;
  --bg-section: #ffffff;
  --bg-card: #ffffff;

  --text-primary: #343a40;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  --border-color: #dee2e6;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* --- Dashboard-specific, derived from the shared palette --- */

  /* Loader backdrop over a panel while its data is in flight. */
  --overlay: rgba(248, 249, 250, 0.82);
  /* Ocean on the globe. Landmasses are #ececec inside world.svg. */
  --map-ocean-to: #a8dadc;
  /* Earthquake dots on the globe. Amber, so they stay distinct from the red ISS marker
     and the white "you are here" dot. */
  --quake: #d2691e;
  /* The unlit half of the globe, laid over ocean and land alike. */
  --globe-night: rgba(16, 36, 58, 0.42);
  --globe-sun: #f5b642;
  /* Land with no recorded visitors. Matches world.svg's own #ececec, so a country shaded
     for a single visitor - which comes out near-white - reads as land rather than as a
     hole in the globe. */
  --globe-land-fill: #ececec;
  /* Visitor spikes standing off the surface. */
  --spike: #1f9e4d;
  --globe-moon: #cfd6e0;
  --globe-plate: #b1543a;
  --globe-track: #7a5bd6;
  --globe-link: #457b9d;
  --globe-aurora: #35d39a;
  /* Weather panel, inset inside the first card. */
  --weather-from: #d4e8eb;
  --weather-to: #ffffff;
  /* Text sitting on the brand gradient (ticker, panel title pills, map buttons).
     White in both themes - the gradient underneath does not change. */
  --on-primary: #ffffff;
  /* Raised inner edge on cards; must disappear in dark mode. */
  --card-sheen: rgba(255, 255, 255, 0.3);
  --text-emboss: 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] {
  --bg-body: #0d1117;
  --bg-section: #161b22;
  --bg-card: #21262d;

  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --border-color: #30363d;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);

  --overlay: rgba(13, 17, 23, 0.82);
  --map-ocean-to: #16324f;
  --quake: #ff9e4f;
  /* Heavier on dark: the ocean underneath is already deep blue. */
  --globe-night: rgba(2, 8, 18, 0.55);
  --globe-sun: #ffd166;
  --globe-land-fill: #d9e2ea;
  --spike: #3ddc84;
  --globe-moon: #e8edf5;
  --globe-plate: #e0805f;
  --globe-track: #a98bff;
  --globe-link: #7cc0f0;
  --globe-aurora: #4dffb8;
  --weather-from: #1b2b3a;
  --weather-to: #161b22;
  /* A white inner edge and white text-shadow both read as smudges on dark cards. */
  --card-sheen: rgba(255, 255, 255, 0.06);
  --text-emboss: none;
}