/* Tackpic's own colours, over the shared sheet.
 *
 * Linked after `../style.css` so these win in both schemes: a later `:root`
 * beats an earlier one at the same specificity, inside a media query or not.
 *
 * Scoped to a file of its own because `../style.css` is Calomi's and the
 * atcomi home page's as well, and those stay as they are.
 *
 * `#2e2e2e` is the app's own dark -- the map's corner pill, the traveller's
 * outline -- so the pages a reader reaches from the App Store look like the
 * app they are about. One palette in both light and dark, because the colour
 * is the point rather than the scheme.
 */
:root {
  --bg: #2e2e2e;
  /* **A step down from `#ececee`, which the shared sheet mixed for a near-black
   * `#131316`.** On `#2e2e2e` the paper is already lighter, so the same white
   * text sat at 11.5:1 and read as glare rather than as text -- the body is
   * 300 weight here, and a light face at full brightness buzzes.
   *
   * 9.4:1, against WCAG's 4.5 for body text, so this is a long way clear of
   * the floor in the direction of comfort rather than near it. It also keeps
   * the gap to `--muted` (5.8:1) wide, which is what makes `.sub` and the
   * footer read as quieter rather than as the same grey.
   *
   * It is the body, the headings and `strong` together -- all three take
   * `--fg` -- which is the point: the page gets quieter as a whole rather
   * than the headings pulling away from the text under them.
   */
  --fg: #d6d6da;
  /* Lighter than the shared sheet's dark `--muted`, which was mixed against a
   * near-black `#131316`; on `#2e2e2e` it reads as low contrast. */
  --muted: #a9a9ae;
  --rule: #454548;
  /* The app's own amber -- `Tokens.Yellow.base`, the welcome ring and the
   * `Sample` pill -- rather than the shared sheet's green, which is Calomi's. */
  --accent: #ffc800;
  /* A shade under the page, so `.lede` and `code` read as inset rather than
   * raised -- the shared sheet's `--card` is the same idea at its own depth. */
  --card: #262628;
}

/* **Lighter on dark.** Light text on a dark ground reads optically heavier
 * than the same weight the other way round, so 400 here sits a shade bolder
 * than it looks on the shared sheet's white. 300 puts it back.
 *
 * `-apple-system` resolves to SF, which has a real Light here: 300 and 400 are
 * measurably different faces, 338.8pt of text against 336.0.
 *
 * **300 is as light as this goes, and asking for less is a lie in the file.**
 * Drawn to a canvas and compared pixel by pixel, 100 and 200 come out
 * identical to 300 and 400 differs by 2,511 pixels -- at body size the system
 * font offers one light face and one regular, so `font-weight: 100` would
 * render exactly as this line does while telling the next reader otherwise.
 * Anything genuinely thinner means a web font, which costs a download and a
 * flash of unstyled text on pages a reviewer and a stuck user open.
 *
 * Where it falls back -- Segoe UI, Helvetica Neue -- 300 may land on the
 * family's own Light or be rounded to 400 rather than synthesised, so nothing
 * ends up thinner than the face actually has.
 */
body { font-weight: 300; }

/* Held apart from the body's 300 rather than the old 400, or `strong` would
 * stop reading as emphasis. */
strong { font-weight: 500; }

/* 16px rather than the shared sheet's 17, with a little more leading under it.
 *
 * **It does not make the lines shorter.** The column is `44rem`, and a `rem`
 * is the root size rather than the body's, so shrinking the text only fits
 * more of it on the same width: 92 characters a line at 17px, 98 at 16, where
 * 45-75 is the range that reads easily. 1.7 gives the eye more to return to.
 */
body { font-size: 16px; line-height: 1.7; }

/* **The column, which is what actually shortens a line.** `44rem` held 98
 * characters at this size; `32rem` holds about 71, inside the 45-75 that
 * reads without the eye losing its place coming back to the left. These are
 * pages somebody opens because something is wrong, so that matters more here
 * than the width looking generous.
 */
main { max-width: 32rem; }

/* Rounder than the shared sheet's 12.
 *
 * The app's radius scale is 4, 8, 12, 16, 20, 24, and this takes the top of
 * it. 20 is the place panel's card and was the first step up from 12; 24 is
 * the one past it and still the app's own number, so the box matches the app
 * the same way the two colours do rather than landing on something chosen by
 * eye. 32 was looked at beside it and is outside the scale -- on a box 512px
 * wide only the corners read, and nothing in the app is shaped that way.
 */
.lede { border-radius: 24px; }