/* ==========================================================================================================================
   DESIGN TOKENS: the one place where the look of the whole system is decided.

   Every stylesheet (index.html, blocks, apps, editor, core and the Material skin) reads these tokens instead of hard-coding
   numbers, so the whole look can be tuned in one place:

     SHAPE      --r-1 … --r-9   corner radius steps        --r-pill  pills and capsules       --r-win / --r-ctl  windows, controls
     TYPE       --fs-0 … --fs-13  type scale               --fw-m / -b / -x   medium, bold, heavy weights
     SPACE      --u             one unit multiplier: every padding, margin and gap is  N * var(--u)  (1px = compact, 1.25px = airy)
     MOTION     --d-1 / -2 / -3 durations                  --ease (standard)  --ease-spring (overshoot)
     COLOUR     --bg --surface --surface2 --line --ink --ink2 --primary --on-primary --c1…c6 --danger --ok

   Material is the design of the site; its values are set on :root here and in index.html.
   ========================================================================================================================== */
:root{
  --u:1px;
  --r-1:2px; --r-2:4px; --r-3:8px; --r-4:12px; --r-5:16px; --r-6:20px; --r-7:24px; --r-8:28px; --r-9:32px; --r-pill:99px;
  --r-win:var(--r-8); --r-win-max:var(--r-7); --r-ctl:var(--r-pill);
  --fs-0:10px; --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:15px; --fs-6:16px; --fs-7:18px; --fs-8:20px; --fs-9:24px; --fs-10:28px; --fs-11:34px; --fs-12:44px; --fs-13:64px;
  --fw-m:600; --fw-b:700; --fw-x:800;
  --d-1:.12s; --d-2:.2s; --d-3:.32s;
  --ease:cubic-bezier(.2,0,0,1); --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --danger:#D93025; --ok:#3DBE7A;
  /* derived from the theme colours, so they follow light and dark */
  --surface3:color-mix(in srgb,var(--surface2) 86%,var(--ink));
  --ink3:color-mix(in srgb,var(--ink2) 60%,var(--surface));
  --tint:color-mix(in srgb,var(--ink) 7%,transparent);
}