/* ---------- Theme tokens ---------- */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #5a5a5a;
  --card-bg: #f7f7f7;
  --card-border: #e5e5e5;
  --accent: #111111;
  --accent-fg: #ffffff;
  --overlay: rgba(0, 0, 0, 0.5);
  --focus: #2563eb;

  /* Brand red from the logo — fixed across both themes */
  --brand: #bf2434;
  --brand-fg: #ffffff;
  --brand-hover: #a11f2c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #f5f5f5;
    --muted: #a3a3a3;
    --card-bg: #0d0d0d;
    --card-border: #262626;
    --accent: #ffffff;
    --accent-fg: #000000;
    --overlay: rgba(0, 0, 0, 0.8);
    --focus: #60a5fa;
  }
}

/* Explicit overrides win over OS preference */
:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #5a5a5a;
  --card-bg: #f7f7f7;
  --card-border: #e5e5e5;
  --accent: #111111;
  --accent-fg: #ffffff;
  --overlay: rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] {
  --bg: #000000;
  --fg: #f5f5f5;
  --muted: #a3a3a3;
  --card-bg: #0d0d0d;
  --card-border: #262626;
  --accent: #ffffff;
  --accent-fg: #000000;
  --overlay: rgba(0, 0, 0, 0.8);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}

.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 5vh, 48px);
  padding: clamp(12px, 2.8vh, 28px) 28px;
}

/* ---------- Topbar (logo + theme toggle) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrap { display: flex; align-items: center; }

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  background: var(--card-bg);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--brand-hover); color: var(--brand-hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.theme-toggle .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle .icon-moon { fill: currentColor; stroke: none; display: none; }

/* Show moon in dark mode, sun in light mode */
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
:root[data-theme="light"] .icon-sun { display: block; }
:root[data-theme="light"] .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .icon-sun { display: none; }
  :root:not([data-theme]) .icon-moon { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(10px, 2vh, 22px) 0;
}

.logo {
  height: clamp(40px, 6.5vh, 64px);
  width: auto;
  display: block;
}

.logo-for-dark { display: none; }

:root[data-theme="dark"] .logo-for-light { display: none; }
:root[data-theme="dark"] .logo-for-dark { display: inline-block; }
:root[data-theme="light"] .logo-for-light { display: inline-block; }
:root[data-theme="light"] .logo-for-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-for-light { display: none; }
  :root:not([data-theme]) .logo-for-dark { display: inline-block; }
}

.hero h1 {
  font-size: clamp(1.8rem, 3.2vw + 1.2vh, 3rem);
  font-weight: 700;
  max-width: 640px;
  margin: 0 auto;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.hero .lead {
  margin: clamp(14px, 2.4vh, 22px) auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(0.95rem, 0.4vw + 0.9rem, 1.08rem);
  line-height: 1.6;
}

/* ---------- Disclaimer + report button ---------- */
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
}

.disclaimer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 620px;
  margin: 0;
}

.btn-report {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 13px 26px 13px 30px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-report:hover { background: var(--brand); color: var(--brand-fg); }
.btn-report:hover .btn-arrow { transform: translateX(3px); }
.btn-report:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.site-footer {
  text-align: center;
  color: var(--brand);
  font-size: 0.75rem;
  margin: 0;
}

.site-footer a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.site-footer a:hover { color: var(--brand-hover); }