/* The handful of tokens Payama's pages need that theme.css does not define.
 *
 * Kept out of theme.css so that re-exporting the design never wipes them.
 * Load order matters: theme.css first, then this.
 *
 * Rule for adding anything here: it must be DERIVED from a theme.css token,
 * not a new raw colour. Then changing the brand in theme.css still changes
 * the whole site, which is the entire point of the token system.
 */

:root {
  /* ── Status tints ───────────────────────────────────────────────────────
   * theme.css gives solid status colours and an accent tint, but no tints
   * for success / warning / error. Badges and alert bars need a soft fill
   * behind coloured text.
   *
   * color-mix keeps these tied to the source colour, so a brand change in
   * theme.css flows through here on its own. Falls back gracefully: a
   * browser without color-mix simply drops the declaration and the badge
   * renders with its border and text colour only, which is still readable.
   */
  --pa-success-tint: color-mix(in srgb, var(--pa-success) 16%, transparent);
  --pa-warning-tint: color-mix(in srgb, var(--pa-warning) 16%, transparent);
  --pa-error-tint: color-mix(in srgb, var(--pa-error) 16%, transparent);
  --pa-danger-tint: color-mix(in srgb, var(--pa-danger) 16%, transparent);

  /* ── Layout widths ──────────────────────────────────────────────────────
   * theme.css sizes components; these size the page around them.
   */
  --page-width: 1040px;
  --narrow-width: 420px;
}