/* Shared theme for the launcher, Ministry Compliance, the Incident & Risk Register and the sign-in pages.
   See DESIGN.md. Principle: colour means status, nothing else; the chrome is monochrome.
   Dark is the default; theme.js sets data-theme on <html> before first paint and adds the switch. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B2029;
  --surface: #232937;
  --raised: #2C3343;
  --line: #3A4457;
  --line-soft: #2F3646;
  --ink: #EEF1F6;
  --ink-2: #CDD3DE;
  --muted: #9EA8BA;
  --on-ink: #1B2029;           /* text on an ink-filled button */
  --overlay: rgba(8, 10, 14, 0.66);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* status: fg = text/icon, bg = tint, solid = bars and rails */
  --current: #6EDB9F;  --current-bg: rgba(110, 219, 159, 0.13);  --current-solid: #3FBF7F;
  --expiring: #F5C451; --expiring-bg: rgba(245, 196, 81, 0.13);  --expiring-solid: #E0A92A;
  --expired: #FF8A8A;  --expired-bg: rgba(255, 138, 138, 0.14);  --expired-solid: #EE5D5D;
  --pending: #7CC8F2;  --pending-bg: rgba(124, 200, 242, 0.13);  --pending-solid: #4AA8DE;
  --missing: #A9B1C0;  --missing-bg: rgba(169, 177, 192, 0.11);  --missing-solid: #6C7586;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4F7;
  --surface: #FFFFFF;
  --raised: #F7F8FA;
  --line: #D8DCE4;
  --line-soft: #E7E9EF;
  --ink: #161A22;
  --ink-2: #333B49;
  --muted: #5A6476;
  --on-ink: #FFFFFF;
  --overlay: rgba(22, 26, 34, 0.45);
  --shadow: 0 18px 48px rgba(22, 26, 34, 0.16);

  --current: #12704A;  --current-bg: #E3F5EC;  --current-solid: #23A26A;
  --expiring: #85580A; --expiring-bg: #FBF0D6; --expiring-solid: #D9A21F;
  --expired: #B02A33;  --expired-bg: #FCE4E5;  --expired-solid: #DC4A52;
  --pending: #165F8C;  --pending-bg: #E1F0FA;  --pending-solid: #2E8BC9;
  --missing: #555E6E;  --missing-bg: #ECEEF2;  --missing-solid: #9AA2B1;
}

:root {
  --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', monospace;
  --r-control: 6px;
  --r-panel: 10px;
  --t-meta: 13px;
  --t-table: 14px;
  --t-body: 16px;
  --t-h3: 20px;
  --t-h2: 25px;
  --t-h1: 31px;

  /* Aliases for the few inline colours left from the original apps (pre-refresh token names). */
  --c-111: var(--ink);
  --c-fff: var(--surface);
  --c-999: var(--muted);
  --c-888: var(--muted);
  --c-E0E0E0: var(--line);
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--on-ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The logo is black on white; in dark mode invert it and screen the black away. */
:root[data-theme="dark"] img[alt="Nova Church"] { filter: invert(1); mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* The light/dark switch (added by theme.js). */
#nova-theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: var(--t-meta); font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer;
}
#nova-theme-toggle:hover { border-color: var(--ink); }
#nova-theme-toggle .sw { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
@media print { #nova-theme-toggle { display: none; } }
@media (max-width: 640px) { #nova-theme-toggle { right: 12px; bottom: 12px; padding: 7px 12px; } }