:root {
  --canvas: #F7F4F0;
  --surface: #FFFFFF;
  --subtle: #FBF9F6;
  --sunken: #F2EEE8;
  --line: #EFEBE4;
  --line2: #E5DFD6;

  --ink: #1E2230;
  --text: #242938;
  --sub: #686E80;
  --tert: #7E8494;
  --inverse: #FFFFFF;

  --orange: #F4681F;
  --orangeHi: #FA7C36;
  --orangeLo: #e05c17;

  --fgOrange: #A8450F;
  --fgCoral: #B33A28;
  --fgGreen: #1E7A4C;
  --fgRed: #C0362D;
  --fgViolet: #5B4C90;

  --amber: #FBA92C;
  --gold: #F5A623;
  --lilac: #DCA8D2;
  --violet: #7C5CE0;
  --coral: #F2634C;
  --teal: #16B3AC;
  --indigo: #443B93;
  --green: #2FA36B;
  --red: #E5544B;
  --blue: #3B82F6;

  --tOrange: #FFF0E6;
  --tAmber: #FFF6E4;
  --tLilac: #F9EDF7;
  --tViolet: #F0ECFC;
  --tCoral: #FEEDEA;
  --tTeal: #E4F7F5;
  --tIndigo: #ECEAF7;
  --tGreen: #E7F6EE;
  --tRed: #FDECEB;
  --tBlue: #EAF2FE;
  --tGrey: #F4F2EF;

  --sh-card: 0 1px 2px rgba(33,26,16,.04), 0 8px 24px -12px rgba(33,26,16,.10);
  --sh-raised: 0 2px 4px rgba(33,26,16,.05), 0 16px 32px -12px rgba(33,26,16,.14);
  --sh-pop: 0 8px 16px rgba(33,26,16,.08), 0 32px 64px -24px rgba(33,26,16,.24);
  --sh-inset: inset 0 1px 2px rgba(33,26,16,.05);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --family: 'Nunito Sans', ui-rounded, 'Segoe UI', system-ui, sans-serif;
}