/* Ritmik design tokens — one source of truth for colour.
 *
 * The palette is unchanged except indigo, which moved one shade darker
 * (#6f6cf0 -> #6360e6) so it can carry WHITE text at 4.83:1. On the original
 * indigo neither black nor white reached AA, so one of them had to move.
 *
 * The `--on-*` tokens are the important part: each says which text colour is
 * readable ON that surface, measured rather than guessed. Green and ink are
 * dark enough for white, as are indigo, coral and blue now; only yellow and
 * lime stay bright enough to need ink.
 * Use `--on-coral` instead of picking a near-white by eye, and contrast stays
 * correct when the palette changes.
 *
 * Contrast of each pairing (WCAG AA needs 4.5:1 for body, 3:1 for large):
 *   green   #0C6C5F + white  6.31   ink 2.89 (fails)
 *   ink     #181509 + white 18.26
 *   coral   #c94210 + white  4.92   ink 3.71 (fails)
 *   blue    #3570dd + white  4.65   ink 3.92 (fails)
 *   indigo  #6360e6 + white  4.83   ink 3.78 (fails)
 *   yellow  #ffc63d + ink   11.65
 *   lime    #c7f04a + ink   13.90
 */
:root {
  /* surfaces */
  --ink: #181509;
  --green: #0C6C5F;
  --coral: #c94210;
  --indigo: #6360e6;
  --blue: #3570dd;
  --yellow: #ffc63d;
  --lime: #c7f04a;
  --paper: #ffffff;

  /* readable text for each surface */
  --on-ink: #ffffff;
  --on-green: #ffffff;
  --on-coral: #ffffff;
  --on-indigo: #ffffff;
  --on-blue: #ffffff;
  --on-yellow: var(--ink);
  --on-lime: var(--ink);
  --on-paper: var(--ink);

  /* the brand hues are too light to read as TEXT on white, so each has a
     darkened text-only twin (all >= 4.9:1 on white) */
  --coral-text: #b23508;
  --indigo-text: #5b58d6;
  --green-text: #0a5648;
  --muted-text: #6f6a5c;      /* 4.9:1 on white */

  /* washes used for chips and hairlines inside cards */
  --tint-on-light: rgba(255, 255, 255, .34);
  --tint-on-light-2: rgba(255, 255, 255, .46);
  --tint-on-dark: rgba(0, 0, 0, .18);
  --tint-on-dark-2: rgba(0, 0, 0, .26);
  --hairline-on-light: rgba(24, 21, 9, .2);
  --hairline-on-dark: rgba(255, 255, 255, .3);

  /* shape + motion, so components stop inventing their own */
  --r-pill: 999px;
  --r-card: 24px;
  --r-panel: 26px;
  --shadow-pop: 0 18px 50px rgba(24, 21, 9, .22);
  --shadow-lift: 0 8px 22px rgba(0, 0, 0, .2);
  --t-fast: .12s;
  --t-base: .16s;
}

/* Pairs with the width/height attributes tools/add-image-dims.mjs writes on every
   <img>. The attributes hand the browser the aspect ratio before the bytes arrive,
   which is what stops the page reflowing as images load (Cumulative Layout Shift).
   On their own, though, a height attribute becomes the used height wherever CSS
   sets only a width — that turned the 168px nav-card illustrations into 168x720.
   This keeps CSS in charge of the rendered size. Bare element selector, so any
   class rule that sets an explicit height still wins. */
img { height: auto; }