/* Design tokens, base styles and animation keyframes. Light and dark themes; the page follows the visitor's
   system until they press the theme button, which sets data-theme on <html> (OpenCharts and SweetAlert2 read it too). */

:root {
  color-scheme: light;
  --bg: #f4f7fa;
  --glow-1: rgba(31, 139, 204, 0.16);
  --glow-2: rgba(255, 184, 68, 0.18);
  --surface: #ffffff;
  --surface-2: #eef3f7;
  --surface-3: #e2ebf3;
  --border: #dae6ef;
  --border-strong: #bfd2e1;
  --text: #0c1a28;
  --text-2: #2e4358;
  --muted: #596b7d;
  --primary: #1f6bad;
  --primary-2: #1f8bcc;
  --accent: #b86e00;
  --grad: linear-gradient(135deg, #175b92 0%, #1f8bcc 58%, #4aa3dc 100%);
  --grad-soft: linear-gradient(135deg, rgba(31, 139, 204, 0.12), rgba(255, 184, 68, 0.1));
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --shadow-1: 0 1px 2px rgba(15, 20, 38, 0.06), 0 2px 8px rgba(15, 20, 38, 0.04);
  --shadow-2: 0 12px 32px -8px rgba(15, 20, 38, 0.18);
  --shadow-3: 0 18px 48px -12px rgba(15, 20, 38, 0.28);
  --shadow-glow: 0 10px 26px -6px rgba(31, 139, 204, 0.5);
  --ring: 0 0 0 3px rgba(31, 139, 204, 0.32);
  --radius: 16px;
  --radius-sm: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --topbar: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #091622;
    --glow-1: rgba(31, 139, 204, 0.28);
    --glow-2: rgba(255, 184, 68, 0.12);
    --surface: #0f2235;
    --surface-2: #153048;
    --surface-3: #1c4260;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #e8f1f8;
    --text-2: #c0d2e2;
    --muted: #8aa0b5;
    --primary: #5eb4e8;
    --primary-2: #8ccbf0;
    --accent: #ffb844;
    --grad: linear-gradient(135deg, #175b92 0%, #1f8bcc 58%, #5eb4e8 100%);
    --grad-soft: linear-gradient(135deg, rgba(94, 180, 232, 0.16), rgba(255, 184, 68, 0.1));
    --ok: #4ade80;
    --ok-bg: rgba(74, 222, 128, 0.14);
    --warn: #fbbf24;
    --warn-bg: rgba(251, 191, 36, 0.14);
    --bad: #f87171;
    --bad-bg: rgba(248, 113, 113, 0.15);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 14px 34px -10px rgba(0, 0, 0, 0.7);
    --shadow-3: 0 22px 54px -14px rgba(0, 0, 0, 0.85);
    --shadow-glow: 0 10px 30px -6px rgba(31, 139, 204, 0.6);
    --ring: 0 0 0 3px rgba(94, 180, 232, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #091622;
  --glow-1: rgba(31, 139, 204, 0.28);
  --glow-2: rgba(255, 184, 68, 0.12);
  --surface: #0f2235;
  --surface-2: #153048;
  --surface-3: #1c4260;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #e8f1f8;
  --text-2: #c0d2e2;
  --muted: #8aa0b5;
  --primary: #5eb4e8;
  --primary-2: #8ccbf0;
  --accent: #ffb844;
  --grad: linear-gradient(135deg, #175b92 0%, #1f8bcc 58%, #5eb4e8 100%);
  --grad-soft: linear-gradient(135deg, rgba(94, 180, 232, 0.16), rgba(255, 184, 68, 0.1));
  --ok: #4ade80;
  --ok-bg: rgba(74, 222, 128, 0.14);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.14);
  --bad: #f87171;
  --bad-bg: rgba(248, 113, 113, 0.15);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 14px 34px -10px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 22px 54px -14px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 10px 30px -6px rgba(31, 139, 204, 0.6);
  --ring: 0 0 0 3px rgba(94, 180, 232, 0.4);
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.55 var(--font);
  color: var(--text);
  background: var(--bg);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* the soft colour glows behind the page; fixed and behind everything, so scrolling never repaints them */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -8%, var(--glow-1), transparent 62%),
    radial-gradient(820px 500px at 96% 2%, var(--glow-2), transparent 60%);
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
a { color: var(--primary); }
img, svg { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--primary); color: #fff; text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 12px; }

/* scrollbars that match the theme */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------------------------------------------------------------- animation */

@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 24px) scale(1.12); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-34px, 30px) scale(0.92); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* sections fade up once as they scroll into view (see js/ui.js); with no motion they are simply there */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .reveal { opacity: 1; transform: none; }
}