/*
 * Colour and font tokens and page basics shared by every page. The home page and the
 * sign-in pages are styled in home.css, the account and staff pages in
 * account.css; both build on these tokens and follow light and dark mode.
 */
:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --text: #1b1d1f;
  --muted: #5d6166;
  --line: #e2e0d8;
  --brand: #0f5b46;
  --brand-ink: #ffffff;
  --danger: #a32020;
  --ok-bg: #e8f3ee;
  --err-bg: #fbeaea;
  /* The brand pair: Bricolage Grotesque for headings and big figures,
     Figtree for everything else (both from Google Fonts, see brand_styles
     in pages.rs). */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The content column of the pages. The header has the home page's on
     every page (home.css), and the staff and narrow account pages
     (account.css) set their own. */
  --shell: 1120px;
  --shell-pad: 16px;
  color-scheme: light dark;
}
@media (min-width: 640px) { :root { --shell-pad: 20px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416;
    --surface: #1b1e21;
    --text: #eceae4;
    --muted: #a3a7ab;
    --line: #2c3034;
    --brand: #3fb58f;
    --brand-ink: #0c1512;
    --danger: #ff8a80;
    --ok-bg: #16302a;
    --err-bg: #3a1c1c;
  }
}
* { box-sizing: border-box; }
/* Room for the scrollbar on short pages too, so nothing shifts between a
   page that scrolls and one that does not. */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-body);
}
a { color: var(--brand); }

/* The Buwiz mark and wordmark (brand_mark and brand_wordmark in pages.rs):
   each SVG is a mask, so they take the brand color of the light or dark
   theme. */
.brand-mark, .brand-wordmark {
  display: inline-block;
  flex: none;
  height: var(--mark-h, 28px);
  aspect-ratio: 316 / 378;
  background-color: var(--brand);
  -webkit-mask: url("/assets/brand/buwiz_mark.svg") center / contain no-repeat;
  mask: url("/assets/brand/buwiz_mark.svg") center / contain no-repeat;
}
.brand-wordmark {
  aspect-ratio: 674 / 215;
  -webkit-mask-image: url("/assets/brand/buwiz_wordmark.svg");
  mask-image: url("/assets/brand/buwiz_wordmark.svg");
}