/* =========================================================
   tokens.css — the whole visual system in one place.
   Colour, type scale, spacing, sizing. Nothing else should
   hard-code a hex value or a magic pixel number.
   ========================================================= */

:root {
  /* ---- paper -------------------------------------------------- */
  --paper:        #FFFFFF;   /* the page */
  --paper-warm:   #F7F2E7;   /* the beige band, used sparingly */
  --card:         #FFFFFF;   /* lifted surfaces */

  /* ---- ink ---------------------------------------------------- */
  --ink:          #191816;
  --ink-soft:     #55514A;
  --ink-faint:    #736D62;

  /* ---- crayons ------------------------------------------------ */
  --red:          #E0392C;
  --red-ink:      #E4231A;   /* display type — a solid, opaque crayon red */
  --red-deep:     #B72A20;
  --blue:         #1B4FD8;
  --blue-wash:    #ECF0FD;
  --orange:       #EF6C1E;
  --yellow:       #F0AE12;
  --green:        #4F8C3E;
  --brown:        #5E4232;   /* the character's hair, used for pull quotes */

  /* ---- lines -------------------------------------------------- */
  --rule:         rgba(25, 24, 22, .14);
  --rule-soft:    rgba(25, 24, 22, .07);
  --focus:        #1B4FD8;
  --btn:          #3A3730;   /* buttons: a warm charcoal grey, never red */
  --btn-line:     #6E695E;

  /* ---- type --------------------------------------------------- */
  /* Two faces, and only two. Caprasimo carries every display moment,
     including the bubbly asides that used to be set in a script face.
     Inter does everything else, on weight alone. */
  --f-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Caprasimo", "Inter", ui-sans-serif, system-ui, sans-serif;

  --t--1:  clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --t-0:   clamp(0.98rem, 0.95rem + 0.16vw, 1.07rem);
  --t-1:   clamp(1.09rem, 1.03rem + 0.28vw, 1.28rem);
  --t-lede:clamp(1.02rem, 0.97rem + 0.22vw, 1.18rem);  /* supporting copy under a heading */
  --t-2:   clamp(1.28rem, 1.17rem + 0.52vw, 1.66rem);
  --t-3:   clamp(1.55rem, 1.33rem + 1.02vw, 2.30rem);
  --t-4:   clamp(1.95rem, 1.52rem + 1.98vw, 3.40rem);
  --t-5:   clamp(2.55rem, 1.63rem + 4.20vw, 5.60rem);
  --t-6:   clamp(3.10rem, 1.55rem + 7.10vw, 8.40rem);

  /* ---- rhythm ------------------------------------------------- */
  --s-1:  6px;
  --s-2:  10px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  36px;
  --s-6:  clamp(44px,  4vw,  64px);
  --s-7:  clamp(64px,  7vw, 104px);
  --s-8:  clamp(88px, 10vw, 152px);

  --wrap:        1240px;
  --wrap-mid:     980px;
  --wrap-read:    720px;
  --gutter:      clamp(20px, 4.4vw, 56px);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  /* ---- decorative asset sizes --------------------------------- */
  --ca-xs: clamp(24px,  3.0vw,  38px);
  --ca-sm: clamp(36px,  4.4vw,  58px);
  --ca-md: clamp(54px,  6.4vw,  88px);
  --ca-lg: clamp(74px,  9.0vw, 126px);
  --ca-xl: clamp(96px, 12.0vw, 178px);

  --ease: cubic-bezier(.22, .68, .32, 1);
}