/* Stowaroo: the look, in one file.
 *
 * Every document pulls this first — before `panel.css` where a page has it and
 * before the page's own `<style>` — so a page rule still wins over a shared
 * one, and a stale cached `panel.css` cannot repaint the button.
 *
 * The tokens live here and nowhere else. No page and no other stylesheet
 * writes a colour: a dark variant later is a second `:root` block and nothing
 * else. The last six are ours — the mockup is light and has no equivalent for
 * the box page's upload error or the dashboard's state pills — and `--white`
 * is here because the base below needs the page's white by name, so that a
 * dark variant can change it without touching a rule.
 *
 * Colours are written as `var(--…)` everywhere, including `:active` states:
 * the active shade is a `filter`, not a seventh value in the palette.
 */

:root {
  color-scheme: light;

  --navy: #073b78;   /* headings, the wordmark's colour, the nav button */
  --blue: #1674d1;   /* the primary button */
  --orange: #ff8a1f; /* the accent button, the step numerals, the ™ */
  --light: #f5f9ff;  /* card and band backgrounds */
  --text: #17365f;   /* body text */
  --muted: #42658e;  /* the lede, and the small print under it */
  --line: #d9e8f8;   /* card borders */
  --footer: #7890aa; /* footer text */

  --white: #fff;     /* the page, and the text on a filled button */

  --danger: #c62828; /* the box page's upload error, readable on white */
  --ok: #1e6b3a;     /* the dashboard's approved and admin pill */
  --ok-bg: #e6f4ea;
  --bad: #a12622;    /* the dashboard's blocked pill */
  --bad-bg: #fdecea;
}

/* The base. A page that wants something else says so in its own `<style>`,
   which comes after this one and therefore wins. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  /* No web font and no CDN: this is an installable app opened in a storage
     unit, and every byte comes from /static. The wordmark is an image, so the
     brand does not depend on a font being available. */
  font-family: -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* The pill. Both a link and a form's submit are this class, and they must look
   the same, so the reset that makes that true is written here and nowhere
   else. `filter` rather than a darker colour: see the note at the top. */
.button {
  display: block;
  padding: 17px 30px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.button:active { filter: brightness(0.9); }
/* Navy on `--orange`, not white: white on that orange is about 2.4:1, which
   fails WCAG AA even for large text. The mockup does it; do not "fix" it back. */
.button.orange { background: var(--orange); color: var(--navy); }
.button.navy { background: var(--navy); }
/* A `<button>` does not inherit the page's font the way an `<a>` does. */
button.button { width: 100%; border: 0; font-family: inherit; cursor: pointer; }

/* The wordmark: an image, sized by height and never by width, so a longer
   wordmark would not stretch. Wrapped in `<a href="/">` — the logo is "home"
   on every page without a second spelling of where home is. */
.brand { display: inline-block; text-decoration: none; }
.brand img { display: block; width: auto; height: 26px; }

.card {
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.muted { color: var(--muted); }