/* Design tokens
   =============
   The palette and radius scale, in one place, from the visual polish review.

   Before this file the site carried three reds, six near-duplicate greys, four
   creams and twenty distinct corner radii, none of them written down anywhere —
   so a new page picked whichever value the page beside it happened to use, and
   the set drifted a little further apart each time. Every colour and radius in
   public/css and src/partials now resolves through a token here.

   Adding a value to this file is a deliberate act. Adding one *outside* it is
   how the twenty radii happened. */

:root {
  /* ---- Ink -------------------------------------------------------------
     Four steps, down from the seven that were in use. #a3a3a3 folded into
     --ink-muted, and #767676 / #6b6b66 / #6b6b68 / #5a5a5a — four greys inside
     six points of each other, doing one job — folded into --ink-soft. */
  --ink: #121211;
  --ink-strong: #363636;
  --ink-soft: #707070;
  --ink-muted: #a4a4a4;

  /* ---- Surfaces --------------------------------------------------------
     --rule is the hairline on cream and white. It absorbed #d8d5ca, #eceae2
     and #e2dfd5, which were three shades of the same 1px divider. They are not
     folded into --cream, which is the surface those hairlines sit on: a border
     the colour of its background is not a border. */
  --white: #fff;
  --cream: #f6f5f0;
  --rule: #e4e2da;

  /* ---- Accent ----------------------------------------------------------
     One red, and one darkening of it for hover. The review counted three reds
     and asked for one; the other two turned out to be #d13733 / #d63935 /
     #c9332f, three different darkenings of the same button hover that had
     drifted apart. Collapsing all three into --red would have taken the hover
     feedback off every primary button on the site, so they collapse into each
     other instead and the pair stays a pair. */
  --red: #e8423e;
  --red-hover: #d13733;

  /* ---- Radius ----------------------------------------------------------
     Three steps plus pill and circle, replacing twenty ad-hoc values.

     CSS clamps a radius to half the shorter side, which is what makes one
     scale work across very different components: --r-sm on a 10px progress bar
     renders as a 5px pill, exactly what its old hand-set 5px did, while the
     same token on a 56px input renders the full 8px. */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-circle: 50%;
}