/* diskroom design tokens. Taken from Diskroom.dc.html — the single source of
   truth for colour, radii and typography. Components take only from here. */

:root {
  /* surfaces */
  --bg: #1c1c1c;
  --surface: #242424;
  --sunken: #1f1f1f;
  --border: #2f2f2f;
  --border-strong: #3a3a3a;

  /* text */
  --text: #f5f5f5;
  --text-dim: #ededed;
  --muted: #9a9a9a;
  --muted-2: #8f8f8f;
  --muted-3: #6e6e6e;

  /* the primary button — inverted */
  --primary-bg: #ededed;
  --primary-fg: #1c1c1c;

  /* statuses */
  --ok-fg: #a9c0a9;
  --ok-bg: #263026;
  --warn-fg: #d6c493;
  --warn-bg: #332e21;
  --danger-fg: #d3a9a9;
  --danger-bg: #302626;

  /* radii.

     There are exactly three in the mockup, and they are named here by purpose
     rather than by size: a 2-4 scale is too tight for "small" and "medium" to
     mean anything, while "chip", "button" and "panel" do. */
  --r-chip: 2px;
  --r-ui: 3px;
  --r-panel: 4px;

  /* typography */
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* grid.

     900 is the width of every screen. The mockup was drawn at 1280, but there
     they were separate pictures on a canvas; a running application values a
     constant width over the maximum pixels for a grid — otherwise the chrome
     dances on every transition.

     Below 900 the card is already pressed against the window edges — that is
     also where it stops padding from the top (see `app.css`). The other
     breakpoints: 760 — two-column screens fold into one, 560 — a phone. */
  --page-max: 900px;
  --gap: 12px;
}