/* DESIGN TOKENS: "Haven" theme. Swap this whole file to re-theme the app.
   app.css only ever reads these variables. */
:root {
  color-scheme: light dark;
  /* color */
  --color-bg: #FBF6EF; --color-bg-2: #F4EBDF; --color-surface: #FFFFFF;
  --color-ink: #3B2F29; --color-ink-2: #6F5F55; --color-line: #EADFD2;
  --color-accent: #C4623F; --color-accent-ink: #FFFFFF; --color-accent-soft: #FBE3D8;
  --color-ok: #3F7A55; --color-ok-soft: #E1EEE4;
  --color-warn: #8A5F0F; --color-warn-soft: #FBEFD5;
  --color-bad: #B4453A; --color-bad-soft: #FCE4E0;
  --color-hero-from: #FBE0CC; --color-hero-to: #F7C9A8; --color-hero-ink: #3B2F29;
  --shadow-1: 0 1px 2px rgba(80,50,30,.06), 0 8px 24px rgba(80,50,30,.08);
  /* type */
  --font-display: "Fraunces", "Heebo", Georgia, serif;
  --font-body: "Nunito", "Heebo", ui-rounded, system-ui, sans-serif;
  --text-sm: 0.875rem; --text-md: 1.125rem; --text-lg: 1.5rem; --text-xl: 2.25rem;
  --leading: 1.45; --weight-body: 600; --weight-strong: 800; --weight-display: 600;
  /* spacing */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  /* radius */
  --radius-sm: 1.1rem; --radius-md: 1.75rem; --radius-lg: 2.1rem; --radius-pill: 999px;
  /* motion */
  --motion-fast: 120ms; --motion-med: 280ms; --ease: cubic-bezier(.2,.8,.2,1);
  --tap: 3.5rem; /* minimum touch target */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1D1815; --color-bg-2: #26201C; --color-surface: #2C2521;
    --color-ink: #F4EADF; --color-ink-2: #BFAE9F; --color-line: #3C332D;
    --color-accent: #EE9474; --color-accent-ink: #2A1A12; --color-accent-soft: #4A2E24;
    --color-ok: #8DC09C; --color-ok-soft: #28372C; --color-warn: #E9B95B; --color-warn-soft: #3E3220;
    --color-bad: #F08A7C; --color-bad-soft: #47292A;
    --color-hero-from: #4E3326; --color-hero-to: #30231E; --color-hero-ink: #FBEDE2;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --color-bg: #1D1815; --color-bg-2: #26201C; --color-surface: #2C2521;
  --color-ink: #F4EADF; --color-ink-2: #BFAE9F; --color-line: #3C332D;
  --color-accent: #EE9474; --color-accent-ink: #2A1A12; --color-accent-soft: #4A2E24;
  --color-ok: #8DC09C; --color-ok-soft: #28372C; --color-warn: #E9B95B; --color-warn-soft: #3E3220;
  --color-bad: #F08A7C; --color-bad-soft: #47292A;
  --color-hero-from: #4E3326; --color-hero-to: #30231E; --color-hero-ink: #FBEDE2;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-med: 0ms; } }