:root {
  /* Six colours. Sunshine + Brick sampled from Parul's own Instagram post. No purple, nothing cool. */
  --sunshine: #FFDE59;
  --brick: #812C2C;
  --bubblegum: #F9A8C1;
  --poppy: #E8492F;
  --cream: #FFF6E7;
  --pink-ink: #C23367;
  --poppy-ink: #CE351E;
  --hot-pink: #F2679B;

  /* Paper: a half-step off cream for stacked surfaces. Not a new brand colour. */
  --paper: #FFFCF5;

  /* Ink tints derived from brick, for hairlines and muted labels only. */
  --brick-12: rgba(129, 44, 44, 0.12);
  --brick-20: rgba(129, 44, 44, 0.2);
  --brick-64: rgba(129, 44, 44, 0.64);
  --brick-scrim: rgba(129, 44, 44, 0.55);

  /* --- Semantic aliases: use these in components --- */
  --surface-page: var(--cream);
  --surface-card: var(--paper);
  --surface-panel-pink: var(--bubblegum);
  --surface-panel-yellow: var(--sunshine);
  --surface-reversed: var(--brick);

  --text-body: var(--brick);            /* 8.41:1 on cream */
  --text-heading: var(--brick);
  --text-muted: var(--brick-64);        /* labels only, never paragraphs */
  --text-reversed: var(--cream);        /* 8.41:1 on brick */
  --text-link: var(--pink-ink);         /* 4.94:1 on cream */
  --text-link-hover: var(--brick);
  --text-label-accent: var(--poppy-ink);/* 4.72:1 on cream */

  --accent-shape: var(--poppy);         /* stars, scribbles. Large only, 3.61:1 */
  --fill-headline: var(--sunshine);     /* fill only, must be outlined in brick */

  --border-hairline: var(--brick-20);   /* the quiet 90% */
  --border-ink: var(--brick);           /* the loud object */
  --shadow-ink: var(--brick);
}