:root{
  /* --- Base palette (the five official PUFI colours) --- */
  --pufi-ink: #1E1E1C;        /* Ink Charcoal */
  --pufi-bone: #F3EFE8;       /* Bone */
  --pufi-mushroom: #B9AF9F;   /* Mushroom */
  --pufi-olive: #747768;      /* Olive Grey */
  --pufi-clay: #9A5E45;       /* Burnt Clay */
  --pufi-white: #FFFFFF;

  /* --- Derived neutrals (mixes of the base palette only) --- */
  --pufi-bone-deep: #E8E2D8;
  --pufi-bone-shade: #DCD5C8;
  --pufi-mushroom-light: #D3CCC0;
  --pufi-mushroom-deep: #9E9382;
  --pufi-ink-soft: #3A3A36;
  --pufi-ink-mute: #6E6E67;
  --pufi-olive-light: #939683;
  --pufi-clay-deep: #7E4B36;
  --pufi-clay-light: #C08D77;

  /* --- Semantic surfaces --- */
  --surface-page: var(--pufi-bone);
  --surface-page-alt: var(--pufi-white);
  --surface-card: var(--pufi-white);
  --surface-card-alt: var(--pufi-bone-deep);
  --surface-inset: var(--pufi-bone-shade);
  --surface-inverse: var(--pufi-ink);
  --surface-accent: var(--pufi-clay);
  --surface-muted: var(--pufi-mushroom);

  /* --- Semantic text --- */
  --text-strong: var(--pufi-ink);
  --text-body: var(--pufi-ink-soft);
  --text-muted: var(--pufi-ink-mute);
  --text-on-inverse: var(--pufi-bone);
  --text-on-inverse-muted: var(--pufi-mushroom);
  --text-on-accent: var(--pufi-bone);
  --text-accent: var(--pufi-clay-deep);
  --text-link: var(--pufi-ink);
  --text-link-hover: var(--pufi-clay-deep);

  /* --- Borders / lines --- */
  --line-hairline: #D8D1C4;
  --line-strong: var(--pufi-ink);
  --line-inverse: #3C3C37;
  --line-focus: var(--pufi-clay);

  /* --- Status (kept quiet: derived from the palette, never candy colours) --- */
  --status-info: var(--pufi-olive);
  --status-success: #5B6B4E;
  --status-warning: var(--pufi-clay);
  --status-danger: #8C3B28;
}