/* Design tokens.

   The one file both the public site and the dashboard load, and the only place a
   value that must agree across them is written down.

   Everything here was already in the product, spelled differently in each place. The
   radius scale below replaced nine literal values and two tokens of the same name
   holding different numbers: --border-radius meant 10px in dashboard-style.css and
   50px in style.css, so a shared component drew a soft corner on one screen and a
   pill on the other depending on which stylesheet happened to be loaded.

   A value used by more than one screen belongs here. A value used by one screen
   belongs next to that screen. The test is not how general the value looks, it is
   whether two files would have to be edited together to change it. */

:root {
    /* ---------------------------------------------------------------------
       Radius

       Four steps, four pixels apart, plus a pill. Nine literals collapsed into
       this: 2 and 4 became sm, 6 and 8 became md, 10 and 12 became lg, 14 and 15
       became xl, and 50px and 999px were the same intent written two ways.

       Steps rather than a value per component, because a component that names its
       own number is a component that will disagree with the one beside it the
       first time either is touched.

       50% is deliberately not here. A circle is not a step on a scale: it is a
       shape, and an avatar is round at every size.
       --------------------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* The corner every interactive control shares, so a button cannot disagree
       with the input beside it. Kept separate from the scale because it is a
       decision about controls rather than a size: this product draws them square,
       and that is why a control and a container do not match here. */
    --control-radius: 0px;

    /* ---------------------------------------------------------------------
       Names the product already used

       Kept pointing at the scale rather than deleted, so the hundred or so places
       that reference them keep working and can move over as each is touched. New
       code uses the scale.
       --------------------------------------------------------------------- */
    --border-radius: var(--radius-lg);
    --small-radius: var(--radius-md);
}