/* LTT space and corners. Load with tokens.css and type.css.
   Space: named by its size in px, set in rem. The scale doubles from 4 to 128 and adds the midpoint between each pair from 8 up:
   4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 (each step 1.33 or 1.5 times the one before).
   The space between two groups is at least twice the space inside them.
   Up to 640 px wide: 128 → 64 (sections), 64 → 48 (blocks inside a section).
   Corners in px. */

:root {
  /* Swatches and table rows on the DS page */
  --space-4: 0.25rem;
  /* A heading to its text; the gap between lines when a row of buttons or links wraps */
  --space-8: 0.5rem;
  /* A section label to its heading; padding at the sides of a button; the header and footer distance from the screen edge */
  --space-12: 0.75rem;
  /* Paragraph to paragraph (a link on its own line too); links in a row; the page gutter; padding inside a component */
  --space-16: 1rem;
  /* A table to its note; padding inside a cell on phones */
  --space-24: 1.5rem;
  /* Text to its buttons; buttons in a row */
  --space-32: 2rem;
  /* Blocks inside a section on phones */
  --space-48: 3rem;
  /* Blocks inside a section: text, a sticker stack, a table (48 on phones); section to section on phones */
  --space-64: 4rem;
  /* Not used now */
  --space-96: 6rem;
  /* Section to section; the page top and bottom (64 on phones) */
  --space-128: 8rem;

  /* Widths. A block takes one of two; on a narrower screen text fills the screen less the gutter.
     Text: the reading column, 34rem = about 70 characters of body text */
  --width-text: var(--measure);
  /* Max: the screen, edge to edge: the header, the footer, the sticker stack. Their content keeps the header's insets (12, 22 from the left) */
  /* Gutter: the least space between content and the screen edge */
  --gutter: var(--space-16);

  /* Buttons, stickers, swatches */
  --radius-2: 2px;
  /* A chat bubble's bottom corner on the speaker's side */
  --radius-6: 6px;
  /* A chat bubble: half the height of a one-line bubble */
  --radius-16: 16px;
}