:root {
  /* primary green */
  --color-primary-50: #e6ecec;
  --color-card-border: #b8c6dc; /* the border of a card and of the admin sidebar */
  --color-primary-100: #b1c4c4;
  --color-primary-200: #8ba8a7;
  --color-primary-300: #56807f;
  --color-primary-400: #356866;
  --color-primary-500: #034240;
  --color-primary-600: #033c3a;
  --color-primary-700: #022f2d;
  --color-primary-800: #022423;
  --color-primary-900: #011c1b;
  --color-primary-main: #034240;
  --color-primary-o-main: #03424029;

  /* secondary mint */
  --color-secondary-50: #e6fefb;
  --color-secondary-100: #b0fbf2;
  --color-secondary-200: #8af9eb;
  --color-secondary-300: #54f6e2;
  --color-secondary-400: #33f5dd;
  --color-secondary-500: #00f2d4;
  --color-secondary-600: #00dcc1;
  --color-secondary-700: #00ac97;
  --color-secondary-800: #008575;
  --color-secondary-900: #006659;

  /* light blue tints (FIGMA_DESIGN_NOTES.md, Design tokens) */
  --color-tint-50: #f5fefd;
  --color-tint-100: #dffdf9;
  --color-tint-200: #d0fcf7;
  --color-tint-300: #bbfbf3;
  --color-tint-400: #adfaf1;
  --color-tint-500: #99f9ed;
  --color-tint-600: #8be3d8;
  --color-tint-700: #6db1a8;
  --color-tint-800: #548982;
  --color-tint-900: #406964;

  /* status */
  --color-success-100: #d4f4e2;
  --color-success-500: #28c76f;
  --color-success-main: #28c76f;
  --color-success-o-main: #28c76f29;
  --color-warning-100: #ffecd9;
  --color-warning-600: #e68f3c;
  --color-warning-main: #ff9f43;
  --color-warning-o-main: #ff9f4329;
  --color-error-600: #e64449;
  --color-error-main: #ff4c51;

  /* grays */
  --color-gray-200: #d5d4d8;
  --color-gray-300: #c0bec5;
  --color-gray-400: #aba8b1;
  --color-gray-500: #97939e;
  --color-gray-600: #827d8b;
  --color-gray-700: #6d6777;
  --color-gray-800: #585164;
  --color-gray-900: #433c50;
  --color-neutral-200: #e9eaeb;
  --color-neutral-400: #a4a7ae;
  --color-neutral-500: #717680;
  --color-neutral-600: #535862;

  /* text and surfaces */
  --color-text-primary: #000c0b;
  --color-text-secondary: #000c0bb2;
  --color-text-disabled: #000c0b66;
  --color-divider: #000c0b1f;
  --color-chip-background: #2f2b3d14;
  --color-gray-38: #011c1b61;
  --color-body-bg: #f8f7fa;
  --color-paper: #ffffff;
  --color-white: #ffffff;

  /* spacing */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --pad-1: 4px;
  --pad-2: 8px;
  --pad-3: 12px;
  --pad-4: 16px;
  --pad-5: 20px;
  --pad-6: 24px;
  --pad-8: 32px;
  --card-header: 24px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-round: 500px;

  /* effects */
  --shadow-primary-sm: 0 2px 6px 0 #03424052;
  --focus-ring: 0 0 0 4px var(--color-primary-o-main);

  /* typography */
  --font-sans: "Alexandria", system-ui, sans-serif;
  --text-h4: 500 24px/38px var(--font-sans);
  --text-body-1: 400 15px/22px var(--font-sans);
  --text-body-1-500: 500 15px/22px var(--font-sans);
  --text-btn-large: 500 17px/26px var(--font-sans);
  --text-btn-medium: 500 15px/22px var(--font-sans);
  --text-btn-small: 500 13px/18px var(--font-sans);
  --text-chip: 500 13px/20px var(--font-sans);
  --text-table-header: 500 13px/24px var(--font-sans);
  --text-table-header-spacing: 0.2px;
  --text-input-label: 400 13px/15px var(--font-sans);
  --text-input-text: 400 15px/24px var(--font-sans);
  --text-xs-medium: 500 12px/18px var(--font-sans);
  --text-sm-regular: 400 14px/20px var(--font-sans);

  /* layout */
  --portal-width: 1440px;
}