/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — the brand, once.

   Colour, type scale, spacing, radii, shadows and focus rings for every public
   page, in light and dark. Pages keep their own layout CSS; they take their
   values from here, so "the brown" or "a card" means the same thing on the
   homepage, /get, /thanks and the legal pages.

   Names are semantic on purpose. --brown-700 used to be both the colour of a
   heading and the background of a dark panel, which is fine until dark mode,
   where one of those has to get lighter and the other darker. So a page asks
   for --heading or --panel, never for a specific brown.

   The browns are the app's (tailwind.config.js `poop`), the gold is the gold
   dookie's. Only tokens and a few base rules live here — no components, so
   nothing in this file can reach into a page's own .card or .btn.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* Brand */
  --brown-800:#463322; --brown-700:#5B4126; --brown-600:#7C5C3E; --brown-500:#A87C4B;
  --brown-300:#C29A6C; --brown-200:#D6BB9C; --brown-100:#EBDFD1; --brown-50:#F7F1E9;
  --gold:#C9962E; --gold-600:#A87A1E; --gold-100:#F6EBD0;
  --water:#2E7DA8; --food:#C9962E; --meds:#C4463C;

  /* Surfaces */
  --paper:#FCFAF6;          /* page */
  --paper-2:#F7F1E9;        /* a band of the page set apart */
  --surface:#FFFFFF;        /* cards */
  --surface-2:#FAF6F0;      /* inputs, wells */
  --tint:#F4ECE1;           /* chips, pills, icon tiles */
  --line:#ECE3D7;
  --line-strong:#DCCDBB;
  --panel:#5B4126;          /* the dark brown blocks */
  --panel-2:#7C5C3E;
  --on-panel:#FFFFFF;
  --nav-bg:rgba(252,250,246,.86);

  /* Text */
  --ink:#2A2018;
  --ink-2:#3F3328;          /* body copy on cards */
  --heading:#4A3420;
  --muted:#76644F;          /* 5.3:1 on --paper, AA for body text */
  --link:#7C5C3E;
  --link-hover:#5B4126;

  /* Actions */
  --btn:#7C5C3E; --btn-hover:#5B4126; --btn-ink:#FFFFFF;
  --ok:#2E7D51; --err:#B4453C;

  /* Type */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:13px; --fs-sm:14.5px; --fs-md:16px; --fs-lg:18px; --fs-xl:21px;
  --fs-h3:clamp(18px,2vw,20px);
  --fs-h2:clamp(28px,4vw,42px);
  --fs-h1:clamp(42px,6.2vw,76px);

  /* Space (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  /* Shape */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(43,32,24,.05),0 4px 12px rgba(43,32,24,.05);
  --shadow-md:0 2px 4px rgba(43,32,24,.04),0 12px 28px rgba(43,32,24,.08);
  --shadow-lg:0 30px 70px rgba(43,32,24,.22);
  --shadow-btn:0 6px 18px rgba(124,92,62,.28);
  --ring:0 0 0 3px var(--paper),0 0 0 5px var(--gold);

  --ease:cubic-bezier(.22,1,.36,1);
}


/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
::selection{background:var(--gold-100);color:var(--ink)}

/* One focus ring for everything you can tab to. :focus-visible, so a mouse
   click doesn't leave a ring behind, but a keyboard always sees where it is. */
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--ring)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Store badges ───────────────────────────────────────────────────────────
   Markup is copied from get.html, never hand-rolled (CLAUDE.md, and
   check_store_badges in tools/check_site.py). The styling lives here so every
   page draws them the same size. */
.store-badge{display:inline-flex;align-items:center;gap:11px;padding:11px 20px;border-radius:12px;
             border:1px solid transparent;text-decoration:none;
             transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.store-badge span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-badge small{font-size:11px;font-weight:500;letter-spacing:.01em;opacity:.9}
.store-badge b{font-size:21px;font-weight:600;letter-spacing:-.02em}
.store-badge.apple{background:#000;color:#fff}
.store-badge.play{background:#fff;color:#000;border-color:#D9D2C8}
.store-badge.play small{letter-spacing:.09em;font-size:10px;font-weight:600}

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