Heptabase

:root {
  --color-dominant: #cea78b;
  --color-surface: #5d3d27;
  --color-ink: #f5f1dc;
  --color-accent: #72918a;
  --color-detail: #cac1ab;
}

/* CSS variables exposed by source */
:root {
  --bg-green-wb: hsl(103,23%,86%);
  --bg-purple-wb: hsl(264,26%,88%);
  --bg-black: #cacaca;
  --bg-brown-editor: #f1e1e1;
  --bg-black-sect: hsl(0,0%,84%,0.4);
  --background-primary: #f7f7f7;
  --shadow-image-lg: 0px 0px 0px 1px rgba(0,0,0,.04),0px 14px 32px rgba(0,0,0,.1),0px 28px 70px rgba(0,0,0,.14);
  --border-orange-sect: hsl(33,79%,57%);
  --bg-green-wb-hsl: 103,23%,86%;
  --border-black-sect: hsl(0,0%,55%);
  --bg-white-sect: rgba(225,225,225,0.4);
  --bg-yellow-wb: hsl(46,74%,88%);
  --bg-blue-editor: #dbeafe;
  --bg-orange-wb-hsl: 31,64%,88%;
  --bg-orange-sect: hsl(31,64%,88%,0.4);
  --text-blue-editor: #2563eb;
  --shadow-card: hsla(0,0%,6%,.1) 0 0 0 1px,hsla(0,0%,6%,.1) 0 2px 4px;
  --shadow-main: 0 0 0 1px hsla(0,0%,6%,.05),0 3px 6px hsla(0,0%,6%,.1),0 9px 24px hsla(0,0%,6%,.2);
  --shadow-float: 0 10px 30px rgba(0,0,0,.06);
  --border-red-sect-hsl: 5,93%,70%;
  --bg-orange-wb: hsl(31,64%,88%);
  --border-white-sect-hsl: 0,0%,68%;
  --text-brown-editor: #9e6b53;
  --bg-red-editor: #fee2e2;
  --background-secondary: #fff;
  --bg-red-wb-hsl: 356,60%,90%;
  --bg-yellow-sect: hsl(46,74%,88%,0.4);
  --border-purple-sect-hsl: 268,97%,77%;
  --bg-gray-editor: #e3e3dd;
  --border-green-sect-hsl: 140,68%,52%;
  --text-pink-editor: #d1538b;
  --border-blue-sect-hsl: 205,87%,64%;
  --border-red-sect: hsl(5,93%,70%);
  --color-eggshell: #fdfcfb;
  --border-green-sect: hsl(140,68%,52%);
  --border-yellow-sect: hsl(45,79%,57%);
  --bg-blue-sect: hsl(197,47%,88%,0.4);
  --bg-red: #f2c2c1;
  --bg-blue-wb-hsl: 197,47%,88%;
  --shadow-image-md: 0 0 4px 0 rgba(0,0,0,.03),0 4px 8px 0 rgba(0,0,0,.04),0 16px 26px 0 rgba(0,0,0,.05);
  --bg-yellow: #f5e090;
  --bg-yellow-editor: #fef9c3;
  --bg-black-wb-hsl: 0,0%,84%;
  --bg-purple-wb-hsl: 264,26%,88%;
  --bg-pink-editor: #f3d9e8;
  --bg-red-sect: hsl(356,60%,90%,0.4);
  --border-yellow-sect-hsl: 45,79%,57%;
  --bg-green-editor: #c4f5d5;
  --bg-purple-editor: #e5d7f5;
  --border-orange-sect-hsl: 33,79%,57%;
  --border-white-sect: hsl(0,0%,68%);
  --text-selection-background: rgba(75,155,230,.3);
  --text-gray-editor: #908f89;
  --text-orange-editor: #ea580c;
  --shadow-card-light: 0 2px 4px 0 hsla(0,0%,6%,.1);
  --bg-orange: #f8cfb2;
  --border-blue-sect: hsl(205,87%,64%);
  --text-green-editor: #16a34a;
  --bg-purple-sect: hsl(264,26%,88%,0.4);
  --text-yellow-editor: #ca8a04;
}