/* Design tokens shared by the site and the app. Fonts are self-hosted (fonts.css); no CDNs (privacy).
   Light is the default; dark follows the system, or is forced via [data-theme]. The sidebar stays navy in both. */
@import url("/assets/fonts.css");

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Brand (same in both themes) */
  --navy: #0f1b2b;
  --navy-2: #13243a;
  --teal: #8ff3e0;
  --teal-ink: #0d1b24;
  --nav-ink: #c9d4e3;

  /* Light theme */
  --paper: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --ink: #13233f;
  --muted: #66758d;
  --faint: #98a4b7;
  --line: #e6ebf3;
  --accent: #2f6bf2;
  --accent-ink: #ffffff;
  --accent-soft: #eaf0fe;
  --rec: #e5484d;
  --rec-soft: #fdecec;
  --ok: #16a37a;
  --ok-soft: #e2f6ef;
  --warn: #b25e09;
  --warn-soft: #fbf0e1;
  --pos: #22c3a6;
  --neu: #8aa5d6;
  --neg: #ef4a4a;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(19 35 63 / 0.04), 0 6px 20px rgb(19 35 63 / 0.05);
  --shadow-lg: 0 2px 6px rgb(19 35 63 / 0.06), 0 24px 60px rgb(19 35 63 / 0.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b121c;
    --surface: #111a27;
    --surface-2: #172233;
    --ink: #e7edf6;
    --muted: #9aa8bd;
    --faint: #6c7a90;
    --line: #1f2b3d;
    --accent: #6d9bff;
    --accent-ink: #0b121c;
    --accent-soft: #16233d;
    --rec: #ff6369;
    --rec-soft: #3a1c1f;
    --ok: #34d3a1;
    --ok-soft: #10281f;
    --warn: #f1a10d;
    --warn-soft: #2f2410;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.28);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.3), 0 24px 60px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b121c;
  --surface: #111a27;
  --surface-2: #172233;
  --ink: #e7edf6;
  --muted: #9aa8bd;
  --faint: #6c7a90;
  --line: #1f2b3d;
  --accent: #6d9bff;
  --accent-ink: #0b121c;
  --accent-soft: #16233d;
  --rec: #ff6369;
  --rec-soft: #3a1c1f;
  --ok: #34d3a1;
  --ok-soft: #10281f;
  --warn: #f1a10d;
  --warn-soft: #2f2410;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.28);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.3), 0 24px 60px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }