/* Design tokens from design/handoff/README.md ("Design tokens"). DONE FOR YOU: read it, don't retype it.
   Every colour and size the app uses lives here. app.css only ever says var(--go), never #c67139,
   so the dark theme is just a second set of values and a design change is a one-line diff.
   Variable names match the mock (design/handoff/design/Safe Home v2.dc.html). */

:root {
  /* Light theme */
  --bg: #f5ead8;        /* page background (cream) */
  --ink: #201e1d;       /* text and 3px outlines */
  --surface: #fff8ec;   /* cards on the page */
  --fill: #d6dcc2;      /* olive cards (water) */
  --go: #c67139;        /* terracotta = "do this" */
  --go-dark: #a85d2c;   /* hover/pressed: one ramp step darker (handoff: terracotta-600; value assumed) */
  --go-ink: #201e1d;    /* text on terracotta: dark, never cream (contrast) */
  --danger: #b3261e;    /* true red: 112 and "Danger" only */
  --on-danger: #fff8ec; /* text on red */
  --mute: #5a534d;      /* secondary text */
  --link: #8a4a22;      /* links (darker terracotta for contrast) */
  --tc: #efd5a6;        /* caution tint */
  --td: #f1c9c1;        /* danger tint */

  /* Shape */
  --radius-pill: 999px; /* buttons, chips, inputs */
  --radius-card: 28px;
  --radius-panel: 40px;
  --line: 3px;          /* border/ink line width */

  /* Sizes for people under stress (mobile) */
  --tap: 56px;          /* minimum tap target */
  --tap-big: 64px;      /* 112 button */

  /* Type */
  --font-head: "Gabriela", Georgia, serif;
  --font-body: "Onest", system-ui, sans-serif;
  --text-body: 17px;
  --text-small: 15px;
  --text-h1: 40px;
  --text-h2: 36px;
  --text-stat: 48px;    /* big litres number */

  color-scheme: light dark;
}

/* Warm dark theme. Twice on purpose: once for phones in dark mode,
   once for screens that force dark (the air-raid flow sets <html data-theme="dark">). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1a17;
    --ink: #efe3d0;
    --surface: #2b2420;
    --fill: #4a5238;
    --go: #e0925c;
    --go-dark: #c97a45;
    --go-ink: #1f1a17;
    --danger: #e5645b;
    --on-danger: #1f1a17;
    --mute: #b5a897;
    --link: #e0925c;
    --tc: #5a4630;
    --td: #5a2b27;
  }
}

:root[data-theme="dark"] {
  --bg: #1f1a17;
  --ink: #efe3d0;
  --surface: #2b2420;
  --fill: #4a5238;
  --go: #e0925c;
  --go-dark: #c97a45;
  --go-ink: #1f1a17;
  --danger: #e5645b;
  --on-danger: #1f1a17;
  --mute: #b5a897;
  --link: #e0925c;
  --tc: #5a4630;
  --td: #5a2b27;
}