:root {
  --hue-cream: #f0e2c4;
  --hue-cream-2: #e7d4ad;
  --hue-paper: #faf0d8;
  --hue-ink: #4a2f1a;
  --hue-ink-soft: #8a6b4a;

  --hue-orange: #e1652a;
  --hue-orange-deep: #c64f1e;
  --hue-mustard: #e7a922;
  --hue-mustard-deep: #c98c12;
  --hue-teal: #2a9d8a;
  --hue-teal-deep: #1f7d6e;
  --hue-pink: #df7d9c;
  --hue-pink-deep: #c45f80;
  --hue-brown: #9b5a2b;
  --hue-brown-deep: #6f3d18;
  --hue-plum: #8a5a86;
  --hue-plum-deep: #5f3c5c;
  --hue-red: #c0392b;

  --surface: var(--hue-cream); /* app stage / page */
  --surface-sunken: var(--hue-cream-2); /* bars, footers, wells */
  --surface-raised: var(--hue-paper); /* cards & panels */
  --text: var(--hue-ink); /* primary text */
  --text-muted: var(--hue-ink-soft); /* secondary text, meta */
  --border: var(--hue-ink); /* every outline */
  --on-color: var(--hue-paper); /* text/icons set on a colored fill */

  --primary: var(--hue-orange); /* primary action, brand header */
  --primary-strong: var(--hue-orange-deep);
  --secondary: var(--hue-teal); /* secondary action, active tab */
  --highlight: var(--hue-mustard); /* on-state, favourites, selected toggle */
  --selected: var(--hue-pink); /* selected filter chips */
  --danger: var(--hue-red); /* destructive */

  --fill-1: var(--hue-orange);
  --fill-1-deep: var(--hue-orange-deep);
  --fill-2: var(--hue-teal);
  --fill-2-deep: var(--hue-teal-deep);
  --fill-3: var(--hue-pink);
  --fill-3-deep: var(--hue-pink-deep);
  --fill-4: var(--hue-mustard);
  --fill-4-deep: var(--hue-mustard-deep);
  --fill-5: var(--hue-brown);
  --fill-5-deep: var(--hue-brown-deep);
  --fill-6: var(--hue-plum);
  --fill-6-deep: var(--hue-plum-deep);
}