:root{
  /* --- Brand logo palette (festive, from the mark) --- */
  --piki-pink:#F4288E;
  --piki-pink-dark:#C4176E;
  --piki-green:#63DC4E;
  --piki-green-dark:#3FB62E;
  --piki-yellow:#F7B238;
  --piki-purple:#6C2A8E;

  /* --- Orange (primary surface accent of the site) --- */
  --orange-100:#FBEBD6;
  --orange-200:#F6D8AE;
  --orange-300:#E9C98E;
  --orange-400:#EFAA5C;
  --orange-500:#E5932F;
  --orange-600:#D3821F;
  --orange-700:#A8823C;

  /* --- Cream / neutral surfaces --- */
  --cream-50:#FBF9F4;
  --cream-100:#F6F3EA;
  --cream-200:#EFEADD;
  --cream-300:#E4DECF;
  --white:#FFFFFF;

  /* --- Forest green (actions) --- */
  --forest-900:#1E3020;
  --forest-800:#2A4430;
  --forest-700:#37583D;

  /* --- Ink / greys --- */
  --ink-900:#1A1A1A;
  --ink-700:#3D3D3D;
  --ink-500:#6E6E6E;
  --ink-400:#8C8C8C;
  --ink-300:#B9B4A8;
  --ink-200:#DDD8CC;

  /* --- Semantic aliases --- */
  --surface-page:var(--cream-100);
  --surface-page-alt:var(--orange-500);
  --surface-card:var(--white);
  --surface-sunken:var(--cream-100);
  --surface-icon:var(--cream-200);

  --text-heading:var(--ink-900);
  --text-body:var(--ink-500);
  --text-strong:var(--ink-900);
  --text-muted:var(--ink-400);
  --text-meta:var(--ink-500);
  --text-note:var(--orange-700);
  --text-on-dark:var(--white);
  --text-on-orange:var(--ink-900);
  --text-on-orange-soft:rgba(255,255,255,.92);

  --action-bg:var(--forest-900);
  --action-bg-hover:var(--forest-800);
  --action-fg:var(--white);
  --action-ghost-border:var(--ink-200);

  --badge-bg-on-cream:var(--orange-100);
  --badge-bg-on-orange:var(--orange-300);
  --badge-fg:var(--ink-900);

  --border-hairline:var(--cream-300);
  --border-dashed:var(--cream-300);
  --focus-ring:var(--piki-pink);
}