/* 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-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:#1d1d1f; --pace-ink-2:#6e6e73; --pace-ink-3:#a1a1a6;
  --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,.72);
  --pace-glass-2:rgba(255,255,255,.88);   /* the same glass where a page of any colour is behind it */
  --pace-blur:blur(30px) saturate(190%);
  --pace-blur-2:blur(16px) saturate(160%);
  --pace-sunk:rgba(0,0,0,.04);            /* a well: a snippet, a segmented track */
  --pace-sunk-2:rgba(0,0,0,.09);          /* the same well, pressed */
  --pace-shade:#e7e8ed;                   /* where a picture has not arrived yet */
  --pace-scrim:rgba(15,23,42,.18);        /* 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%,#dbe8e6 0,rgba(219,232,230,0) 62%) fixed,
    linear-gradient(180deg,#f5f5f8,#e7e8ed) 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,.08); --pace-hair-2:rgba(0,0,0,.05);
  --pace-rim:rgba(255,255,255,.9);        /* the lit top edge of glass */
  --pace-edge:var(--pace-line) solid var(--pace-rim);

  /* lifts */
  --pace-lift:0 18px 50px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05);
  --pace-lift-sm:0 6px 22px rgba(15,23,42,.07);
  --pace-lift-lg:0 24px 70px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.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 */
  --pace-accent:#0071e3;
  --pace-good:#1c7430;
  --pace-bad:#c0342e;
  /* a meaning said quietly — behind a chip, under a focused field. Mixed from the colour
     above rather than written out, so one line changes the loud and the quiet together. */
  --pace-accent-soft:color-mix(in srgb,var(--pace-accent) 13%,transparent);
  --pace-good-soft:color-mix(in srgb,var(--pace-good) 14%,transparent);
  --pace-bad-soft:color-mix(in srgb,var(--pace-bad) 14%,transparent);
  --pace-accent-ink:color-mix(in srgb,var(--pace-accent) 80%,var(--pace-ink-hard));
  --pace-warn:#f2c014;                    /* the test copy: look, do not trust */
  --pace-live:#0b4a22;                    /* the real site: visitors see this */
  --pace-you:#e06c00;
  --pace-focus:0 0 0 var(--pace-line-4) var(--pace-accent-soft);

  /* 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);
}