/* The shared design tokens of Oblique Software: the status colors, type,
   space, corners and widths. They are the same in every app of the suite
   (Oblique, Homer, lomax, Visitant and SuperMag) and in both tones. In
   Homer the grays, the frames and the shadows live in ledger.css, and
   Homer's colors in homer.css. Every color comes from the shared palette,
   ramps.css. Copied from the shared style guide (~/Work/oblique,
   app/design/tokens.css); Homer may change its copy.

   Load this file, then ramps.css, then ledger.css, then homer.css, then
   base.css, parts.css and areas.css. Homer's /style-guide reads these
   files to draw its swatches, so a value changed here changes there. */

:root {
  /* Status: the 3 lights, the same in every tone. Each is words, the fill under them, and a solid. */
  --good: var(--mint-700);          /* good, and added text */
  --good-fill: var(--mint-100);     /* the fill under good words */
  --good-solid: var(--mint-500);    /* a good dot or bar */
  --warning: var(--lemon-800);      /* check this: a person needs to look or act */
  --warning-fill: var(--lemon-100); /* the fill under warning words */
  --warning-solid: var(--lemon-400);/* a warning dot or bar */
  --urgent: var(--red-700);         /* broken, or it deletes */
  --urgent-fill: var(--red-100);    /* the fill under urgent words */
  --urgent-solid: var(--red-500);   /* an urgent dot or bar */
  --urgent-deep: var(--red-800);    /* the danger button under the pointer */

  /* Type: the system's own face in every app and both tones */
  --font-sans: 'Adwaita Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, monospace;
  --text-title: 40px;
  --text-thing: 36px;
  --text-lead: 18px;
  --text-heading: 20px;
  --text-row: 17px;
  --text-body: 16px;
  --text-small: 15px;
  --text-meta: 14px;
  --text-tag: 13px;
  --text-key: 12px;

  /* Space, named by size in px */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-36: 36px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;

  /* Radius */
  --radius-panel: 14px;
  --radius-logo: 12px;
  --radius-button: 10px;
  --radius-pill: 6px;
  --radius-check: 5px;
  --radius-small-tile: 4px;
  --radius-round: 50%;
  --radius-token: 999px;

  /* Widths */
  --shell-width: 1224px;
  --measure-text: 640px;
  --measure-list: 760px;

  /* Glyph sizes: the 12 by 12 grid at whole steps */
  --glyph-title: 36px;
  --glyph-menu: 24px;
  --glyph-list: 20px;
  --glyph-inline: 16px;
}