/* The one set of sizes every Soundfield page uses: Explore (index.html), Demo (map.html) and Duet
   (../duet/). Each page links this file before its own sheets, and no sheet sets a size of its own
   where a token says it (tokens.test.mjs checks): so the bar, the controls, the card, the popover
   and the sheets sit at the same places and read the same on every page.

   Spacing is an 8 px grid, with a 4 px half step inside a group. Colours stay in style.css. */

:root {
  /* the grid */
  --gap-half: 4px;     /* inside a group: the zoom buttons, a chip's parts */
  --gap: 8px;          /* between controls, chips and rows */
  --pad: 16px;         /* inside every panel: the card, the popover, the dialogs, the start's panels */
  --pad-lg: 24px;      /* round the start's import panel and a dialog's text */
  --edge: 16px;        /* from the screen's edge to every floating panel, on every page */

  /* one control height: every button, field and item of the top panel and the bottom bar */
  --control-h: 40px;
  /* chips, pills and the buttons inside a control group: the control height less its 4 px inset */
  --chip-h: 32px;

  /* one radius for every panel and control; what sits inside one, inset 4 px, keeps its curve */
  --corner: 12px;
  --corner-in: 8px;
  --corner-xs: 4px;    /* the smallest marks: a key, a sheet's handle */
  --round: 999px;      /* chips and pills */

  /* one type scale, sentence case everywhere */
  --fs-xs: 11px;       /* credits, ranks, a key */
  --fs-sm: 12px;       /* notes, meta, captions */
  --fs-md: 13px;       /* body and every control */
  --fs-lg: 15px;       /* fields, song titles, the name in the bar */
  --fs-xl: 17px;       /* panel headings, the popover's name */
  --fs-2xl: 22px;      /* the card's name */
  --fs-3xl: 28px;      /* the start's title */
}