/* Onlyonery's look: the brand's colours and type levels, the one copy the shop, today's page and the brand guide read
   (theme/web/README.md). Custom properties only: each page's own rules use them. A product's own pages keep their own.

   The type levels are the shop's (shop.css h1, h2, .intro, body, .fine), a phone's up to 700 px wide, then a tablet's
   and a laptop's. Pages and parts that set their own sizes: About us's headline (38 at every width), the lists'
   headings (22 on a phone, 28 on a tablet, 26 on a laptop), the news band's (22, 28, 24), the rule band's (30, 34 from
   700 px), the smaller section headings (h2.sub and a thing's page's "about", 22), the delivery box's (17), the
   footer's (15), the blog's posts (body 18 on a phone too, headings 24), and today's page (the opening-soon page,
   bake.mjs: headline 62, section heading 44, intro 21 and body 18, or 40, 32, 18 and 17 on a phone). */
:root {
  /* the palette */
  --paper: #fffaf0;
  --paper2: #f7efdf;
  --night: #2a2352;
  --ink: #1d1a2f;
  --muted: #5a5478;
  --brass: #8a5a14;
  --lamp: #ffd966;
  --gold: #c97c14; /* Brass gold: the lit o of the logo on light, never text */
  --line: #e8dcc4;
  --sky: #cfe8fb;
  --sky2: #eaf5fd;
  /* the drawings' accents and tiny details, never text */
  --amber: #e8a33d;
  --gold-lt: #fff3b0;
  --brick: #c0593f;
  --teal: #4fb5a5;
  --pink: #ff8fab;
  /* messages: Mistake (errors, a cancelled order) and Done (saved, sent, confirmed). A warning or a tip takes no
     colour of its own, Night words on Paper 2 */
  --mistake: #a3402a;
  --done: #2f7a3b;
  /* the focus ring, 3 px: Night on light, and a dark ground sets it to var(--lamp) */
  --focus: var(--night);

  /* type: Atkinson Hyperlegible for every sentence; each level its size, line height and longest line */
  --sans: 'Atkinson Hyperlegible', 'DejaVu Sans', system-ui, sans-serif;
  --headline: 32px;
  --headline-lh: 1.12;
  --heading: 26px;
  --heading-lh: 1.18;
  --intro: 18px;
  --intro-lh: 1.6;
  --intro-width: 640px;
  --body: 17px;
  --body-lh: 1.6;
  --body-width: 720px;
  --small: 15px;
  --small-lh: 1.5;
}
@media (min-width: 700px) {
  :root {
    --headline: 44px;
    --heading: 32px;
    --body: 18px;
  }
}