/*
 * Copied unchanged from extension/src/ui/shared/tokens.css: the site and the extension share one
 * look, and packages do not import each other. Change the tokens there first, then copy them here.
 */
/*
 * Design tokens of the "Pastel Desk" look (docs/BRAND.md, "Working set for the MVP"). Every colour,
 * surface and type setting of the interface comes from here. Ink on paper carries all text; the
 * pastels are fills and group colours, never text.
 */
:root {
  color-scheme: light;

  /* The seven brand colours. */
  --paper: #f6f1e7;
  --ink: #2e2a3d;
  --pink: #f2b5c4;
  --mint: #bfe3d0;
  --sky: #b9d7ee;
  --butter: #ffe3a3;
  --lilac: #a99bd6;

  /* Tuned additions. */
  --card: #fcfaf4;
  --rule: #ddd5c6;
  --muted-ink: #5e5870;
  --lilac-shade: #8576b8;
  --lilac-light: #cec5ec;
  --danger: #9b2c3f;
  --danger-fill: #f8d2d6;

  /* The browser's nine group colours, in pastel; a group's name is always shown beside them. */
  --group-grey: #d8d3cb;
  --group-blue: var(--sky);
  --group-red: #f4a49c;
  --group-yellow: var(--butter);
  --group-green: var(--mint);
  --group-pink: var(--pink);
  --group-purple: var(--lilac);
  --group-cyan: #a6dedf;
  --group-orange: #ffc99a;

  /* Surfaces: one pixel of the drawing is two CSS pixels. */
  --pixel: 2px;
  --outline: var(--pixel) solid var(--ink);
  --shadow: calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 var(--ink);
  --shadow-small: var(--pixel) var(--pixel) 0 var(--ink);
  /* A two-pixel butter ring outside an ink line: visible on paper and on ink alike. */
  --focus-ring: 0 0 0 var(--pixel) var(--ink), 0 0 0 calc(var(--pixel) * 3) var(--butter);

  /* Checkerboard dithers for inactive and parked areas and the title strip. */
  --dither-lilac: repeating-conic-gradient(var(--lilac) 0 25%, var(--paper) 0 50%) 0 0 / 4px 4px;
  --dither-pink: repeating-conic-gradient(var(--pink) 0 25%, var(--paper) 0 50%) 0 0 / 4px 4px;
  --dither-rule: repeating-conic-gradient(var(--rule) 0 25%, var(--paper) 0 50%) 0 0 / 4px 4px;

  /* Type: a plain, legible body face; the bitmap face is drawn (ui/shared/pixel-font.ts). */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 15px;
  --font-size-small: 13px;
  --line-height: 1.4;
}