/* PACE's look, in the numbers it is actually made of. Taken out of its own screen, not written
   down beside it — a design language described is a design language that drifts.
   `python3 pace.py library` writes this file; do not edit it here.

   This is the only place in Tweakpin where a colour, a corner or an edge width is a number.
   Everything the product draws — the review layer, the agency's screens, the banner on a site's
   copies — reads these names and nothing else, so changing a value here changes the product and
   nothing has to be edited to follow. */
:root{
  /* words */
  --pace-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  --pace-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;  /* headings */
  --pace-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* the smallest PACE ever writes: labels, counts, tags. One token, so that a phone held at
     arm's length can be given a bigger one in a single line and every small thing follows. */
  --pace-tiny:11px;

  /* ink */
  --pace-ink:#121212; --pace-ink-2:#6d6d6d; --pace-ink-3:#a6a6a6;
  --pace-ink-hard:#000;                   /* an ink button held down */
  --pace-on-ink:#fff;                     /* words on ink, or on any of the meanings below */

  /* surfaces */
  --pace-solid:#fff;
  --pace-glass:rgba(255,255,255,.62);
  --pace-glass-2:rgba(255,255,255,.78);   /* the same glass where a page of any colour is behind it */
  --pace-blur:blur(28px) saturate(160%);
  --pace-blur-2:blur(16px) saturate(140%);
  --pace-sunk:rgba(0,0,0,.04);            /* a well: a snippet, a segmented track */
  --pace-sunk-2:rgba(0,0,0,.08);          /* the same well, pressed */
  --pace-shade:#e9e9e9;                   /* where a picture has not arrived yet */
  --pace-scrim:rgba(0,0,0,.14);        /* the room dimmed behind one card */
  /* every layer is fixed, or the two washes tile against a short page and the screen comes out
     in bands */
  --pace-canvas:radial-gradient(900px 520px at 12% -12%,#fff 0,rgba(255,255,255,0) 62%) fixed,
    radial-gradient(820px 520px at 112% 112%,#dddddd 0,rgba(221,221,221,0) 62%) fixed,
    linear-gradient(180deg,#f7f7f7,#ededed) fixed;

  /* edges */
  --pace-line:1px; --pace-line-2:2px; --pace-line-3:3px; --pace-line-4:4px;
  --pace-halo:8px;                        /* a ring that means look here, outside the edge */
  --pace-hair:rgba(0,0,0,.07); --pace-hair-2:rgba(0,0,0,.045);
  --pace-rim:rgba(255,255,255,.85);        /* the lit top edge of glass */
  --pace-edge:var(--pace-line) solid var(--pace-rim);

  /* lifts */
  --pace-lift:0 20px 60px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --pace-lift-sm:0 6px 24px rgba(0,0,0,.06);
  --pace-lift-lg:0 30px 80px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.05);

  /* corners */
  --pace-r-xs:8px; --pace-r-sm:12px; --pace-r-md:16px; --pace-r-lg:24px;
  --pace-pill:999px; --pace-round:50%;
  --pace-r-phone:46px;                    /* the one corner that is a real object's, not ours */

  /* meanings — said in greys. Nothing here is a colour: black is the thing to press or the thing
     that is so, a pale grey is what is not real yet, and every state also has its own shape,
     weight or small icon (in the pieces that use these), so it reads without any colour at all. */
  --pace-accent:var(--pace-ink);
  --pace-good:var(--pace-ink);
  --pace-bad:var(--pace-ink);
  /* the same meaning said quietly — behind a chip, under a focused field */
  --pace-accent-soft:rgba(0,0,0,.06);
  --pace-good-soft:rgba(0,0,0,.06);
  --pace-bad-soft:rgba(0,0,0,.06);
  --pace-accent-ink:var(--pace-ink);
  --pace-warn:var(--pace-ink-3);          /* the test copy: pale, hatched, a flask — look, do not trust */
  --pace-warn-hatch:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 3px,transparent 3px 7px);
  --pace-live:var(--pace-ink);            /* the real site: solid ink and a filled dot — visitors see this */
  --pace-you:var(--pace-ink);
  --pace-focus:0 0 0 var(--pace-line-4) rgba(0,0,0,.08);

  /* the movement everything here makes */
  --pace-ease:cubic-bezier(.2,.8,.2,1);

  /* a page held up as a real object */
  --pace-frame-tablet:0 0 0 9px var(--pace-rim),0 0 0 10px var(--pace-hair-2),var(--pace-lift-lg);
  --pace-frame-phone:0 0 0 10px var(--pace-rim),0 0 0 11px var(--pace-hair-2),var(--pace-lift-lg);
}