/* Curly's look: colours, fonts and shapes shared by every page.
   Change the brand here and the whole app follows. The brand board is at
   https://claude.ai/artifact/9odukTBuiJCTW4az1m7gUk */

@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:400; font-display:swap;
             src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:700; font-display:swap;
             src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
             src:url(/fonts/fraunces-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap;
             src:url(/fonts/fraunces-latin-700-normal.woff2) format('woff2'); }

:root {
  /* Harbour teal, cream and ink. */
  --bg:#fbf7f0; --card:#fff; --text:#16201f; --muted:#4e5a58; --line:#e8e0d2;
  --accent:#0f5257; --on-accent:#fff;
  /* Results: red is only ever used for "High risk". */
  --red:#9b1c1c; --redbg:#f9deda; --amber:#6b4e00; --amberbg:#fbedc0; --green:#1c6b45; --greenbg:#dcefe4;
  /* For drawings and small touches only. */
  --terracotta:#d9774f; --butter:#f2cf6b; --sky:#bfdce6; --blush:#f6d8cc;
  --font-body:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head:'Fraunces', Georgia, serif;
  --radius:20px; --radius-small:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1918; --card:#172423; --text:#eef2ef; --muted:#a9b7b4; --line:#2a3a38;
    --accent:#7cc8c2; --on-accent:#0f1918;
    --red:#ff9b8f; --redbg:#3a1f1c; --amber:#f2cf6b; --amberbg:#3a3016; --green:#8fd9b0; --greenbg:#17302a;
  }
}

body { margin:0; background:var(--bg); color:var(--text); font:17px/1.55 var(--font-body); }
h1, h2, h3 { font-family:var(--font-head); font-weight:700; line-height:1.2; }
a { color:var(--accent); }

/* The Curly mark next to the name. */
.brand { display:flex; align-items:center; gap:10px; }
.brand svg { flex:none; }
.brand .mark-ring { fill:var(--accent); }
.brand .mark-tick { stroke:var(--accent); }