/* OfficeGest Design System — generated from tokens.json */
:root, [data-theme="default"] {
  --bg-app: var(--body-background-middle);
  --bg-surface: var(--body-background-top);
  --bg-raised: var(--body-background-top);
  --bg-sunken: var(--body-background-bottom);
  --bg-hover: var(--body-background-hover-middle);
  --fg-1: var(--body-text-color);
  --fg-2: var(--body-text-color);
  --fg-3: var(--muted-text-color);
  --fg-4: var(--grey-500);
  --line-1: var(--border-color);
  --line-2: var(--body-background-bottom);
  --line-3: var(--border-hover-color);
  --line-focus: var(--input-focus-border);
  --accent: var(--primary-background);
  --accent-hover: var(--primary-hover-background);
  --accent-active: var(--primary-active-background);
  --grey-50: hsl(0, 0%, 100%);
  --grey-75: hsl(0, 0%, 99%);
  --grey-100: hsl(0, 0%, 97%);
  --grey-200: hsl(0, 0%, 96%);
  --grey-300: hsl(0, 0%, 90%);
  --grey-400: hsl(0, 0%, 84%);
  --grey-500: hsl(0, 0%, 69%);
  --grey-600: hsl(0, 0%, 56%);
  --grey-700: hsl(0, 0%, 43%);
  --grey-800: hsl(0, 0%, 27%);
  --grey-900: hsl(0, 0%, 13%);
  --grey-1000: hsl(0, 0%, 0%);
  --white: var(--grey-50);
  --black: var(--grey-1000);
  --blue-50: hsl(204, 100%, 98%);
  --blue-75: hsl(203, 100%, 97%);
  --blue-100: hsl(202, 100%, 94%);
  --blue-200: hsl(199, 100%, 86%);
  --blue-300: hsl(198, 100%, 73%);
  --blue-400: hsl(197, 100%, 59%);
  --blue-500: hsl(198, 98%, 48%);
  --blue-600: hsl(201, 100%, 41%);
  --blue-700: hsl(201, 100%, 33%);
  --blue-800: hsl(200, 100%, 29%);
  --blue-900: hsl(201, 89%, 24%);
  --blue-1000: hsl(203, 90%, 16%);
  --green-50: hsl(140, 43%, 99%);
  --green-75: hsl(133, 53%, 97%);
  --green-100: hsl(139, 58%, 93%);
  --green-200: hsl(138, 53%, 85%);
  --green-300: hsl(139, 52%, 73%);
  --green-400: hsl(139, 47%, 58%);
  --green-500: hsl(139, 47%, 44%);
  --green-600: hsl(139, 51%, 36%);
  --green-700: hsl(139, 48%, 29%);
  --green-800: hsl(139, 43%, 24%);
  --green-900: hsl(141, 42%, 20%);
  --green-1000: hsl(140, 53%, 10%);
  --red-50: hsl(0, 80%, 98%);
  --red-75: hsl(0, 86%, 97%);
  --red-100: hsl(0, 93%, 94%);
  --red-200: hsl(1, 100%, 89%);
  --red-300: hsl(1, 96%, 82%);
  --red-400: hsl(1, 93%, 71%);
  --red-500: hsl(1, 87%, 60%);
  --red-600: hsl(1, 75%, 51%);
  --red-700: hsl(1, 77%, 42%);
  --red-800: hsl(1, 72%, 35%);
  --red-900: hsl(1, 65%, 31%);
  --red-1000: hsl(1, 77%, 15%);
  --orange-50: hsl(45, 100%, 99%);
  --orange-75: hsl(42, 100%, 96%);
  --orange-100: hsl(43, 96%, 89%);
  --orange-200: hsl(42, 97%, 77%);
  --orange-300: hsl(40, 96%, 65%);
  --orange-400: hsl(38, 96%, 54%);
  --orange-500: hsl(32, 91%, 50%);
  --orange-600: hsl(26, 94%, 44%);
  --orange-700: hsl(20, 89%, 37%);
  --orange-800: hsl(17, 83%, 31%);
  --orange-900: hsl(16, 78%, 26%);
  --orange-1000: hsl(15, 92%, 14%);
  --sky-50: hsl(202, 100%, 98%);
  --sky-75: hsl(200, 100%, 97%);
  --sky-100: hsl(200, 94%, 94%);
  --sky-200: hsl(196, 97%, 86%);
  --sky-300: hsl(194, 98%, 74%);
  --sky-400: hsl(194, 96%, 60%);
  --sky-500: hsl(194, 91%, 49%);
  --sky-600: hsl(195, 100%, 40%);
  --sky-700: hsl(196, 99%, 32%);
  --sky-800: hsl(196, 93%, 27%);
  --sky-900: hsl(197, 82%, 24%);
  --sky-1000: hsl(199, 83%, 16%);
  --purple-50: hsl(270, 67%, 99%);
  --purple-75: hsl(246, 83%, 98%);
  --purple-100: hsl(253, 83%, 95%);
  --purple-200: hsl(250, 86%, 92%);
  --purple-300: hsl(253, 87%, 85%);
  --purple-400: hsl(255, 83%, 76%);
  --purple-500: hsl(258, 81%, 66%);
  --purple-600: hsl(262, 76%, 58%);
  --purple-700: hsl(263, 64%, 50%);
  --purple-800: hsl(263, 64%, 42%);
  --purple-900: hsl(263, 62%, 35%);
  --purple-1000: hsl(261, 66%, 23%);
  --yellow-50: hsl(38, 100%, 100%);
  --yellow-75: hsl(45, 75%, 95%);
  --yellow-100: hsl(50, 84%, 88%);
  --yellow-200: hsl(52, 85%, 72%);
  --yellow-300: hsl(50, 84%, 64%);
  --yellow-400: hsl(47, 82%, 53%);
  --yellow-500: hsl(45, 80%, 47%);
  --yellow-600: hsl(40, 83%, 40%);
  --yellow-700: hsl(35, 79%, 33%);
  --yellow-800: hsl(31, 70%, 29%);
  --yellow-900: hsl(27, 62%, 26%);
  --yellow-1000: hsl(25, 72%, 14%);
  --brown-50: hsl(30, 50%, 98%);
  --brown-75: hsl(38, 44%, 96%);
  --brown-100: hsl(39, 48%, 92%);
  --brown-200: hsl(38, 44%, 83%);
  --brown-300: hsl(36, 45%, 72%);
  --brown-400: hsl(33, 44%, 60%);
  --brown-500: hsl(30, 43%, 53%);
  --brown-600: hsl(26, 41%, 48%);
  --brown-700: hsl(23, 40%, 40%);
  --brown-800: hsl(21, 36%, 34%);
  --brown-900: hsl(21, 34%, 28%);
  --brown-1000: hsl(19, 38%, 15%);
  --pink-50: hsl(323, 100%, 97%);
  --pink-75: hsl(316, 100%, 97%);
  --pink-100: hsl(316, 100%, 95%);
  --pink-200: hsl(312, 100%, 89%);
  --pink-300: hsl(313, 100%, 80%);
  --pink-400: hsl(315, 100%, 68%);
  --pink-500: hsl(317, 100%, 59%);
  --pink-600: hsl(322, 95%, 51%);
  --pink-700: hsl(324, 100%, 43%);
  --pink-800: hsl(324, 99%, 34%);
  --pink-900: hsl(324, 92%, 30%);
  --pink-1000: hsl(326, 100%, 18%);
  --border-color: var(--grey-300);
  --border-hover-color: var(--grey-500);
  --body-background-top: var(--grey-50);
  --body-background-middle: var(--grey-100);
  --body-background-bottom: var(--grey-200);
  --body-background-hover-top: var(--grey-200);
  --body-background-hover-middle: var(--grey-200);
  --body-background-hover-bottom: var(--grey-300);
  --content-background: var(--body-background-top);
  --body-text-color: var(--grey-800);
  --body-text-hover-color: var(--grey-700);
  --acent-text-color: var(--body-text-color);
  --muted-text-color: var(--grey-600);
  --link-color: var(--blue-800);
  --navbar-background: var(--blue-800);
  --secondary-color: var(--muted-text-color);
  --secondary-contrast-color: var(--body-text-color);
  --secondary-background: var(--grey-700);
  --secondary-border: var(--grey-800);
  --secondary-hover-color: var(--body-text-hover-color);
  --secondary-hover-background: var(--grey-800);
  --secondary-hover-border: var(--grey-900);
  --secondary-active-color: var(--body-text-color);
  --secondary-active-background: var(--grey-800);
  --secondary-active-border: var(--grey-900);
  --secondary-light-color: var(--grey-75);
  --secondary-light-background: var(--body-background-middle);
  --secondary-light-border: var(--border-color);
  --secondary-light-hover-color: var(--grey-100);
  --secondary-light-hover-background: var(--body-background-hover-middle);
  --secondary-light-hover-border: var(--border-hover-color);
  --secondary-light-active-color: var(--grey-75);
  --secondary-light-active-background: var(--body-background-bottom);
  --secondary-light-active-border: var(--border-hover-color);
  --primary-color: var(--blue-800);
  --primary-contrast-color: var(--blue-900);
  --primary-background: var(--blue-800);
  --primary-border: var(--blue-900);
  --primary-hover-color: var(--blue-1000);
  --primary-hover-background: var(--blue-900);
  --primary-hover-border: var(--blue-1000);
  --primary-active-color: var(--blue-1000);
  --primary-active-background: var(--blue-900);
  --primary-active-border: var(--blue-1000);
  --primary-light-color: var(--blue-50);
  --primary-light-background: var(--blue-100);
  --primary-light-border: var(--blue-300);
  --primary-light-hover-color: var(--blue-50);
  --primary-light-hover-background: var(--blue-200);
  --primary-light-hover-border: var(--blue-400);
  --primary-light-active-color: var(--blue-50);
  --primary-light-active-background: var(--blue-200);
  --primary-light-active-border: var(--blue-400);
  --success-color: var(--green-700);
  --success-contrast-color: var(--green-900);
  --success-background: var(--green-800);
  --success-border: var(--green-900);
  --success-hover-color: var(--green-1000);
  --success-hover-background: var(--green-900);
  --success-hover-border: var(--green-1000);
  --success-active-color: var(--green-1000);
  --success-active-background: var(--green-900);
  --success-active-border: var(--green-1000);
  --success-light-color: var(--green-50);
  --success-light-background: var(--green-100);
  --success-light-border: var(--green-300);
  --success-light-hover-color: var(--green-50);
  --success-light-hover-background: var(--green-200);
  --success-light-hover-border: var(--green-400);
  --success-light-active-color: var(--green-50);
  --success-light-active-background: var(--green-200);
  --success-light-active-border: var(--green-400);
  --danger-color: var(--red-800);
  --danger-contrast-color: var(--red-900);
  --danger-background: var(--red-800);
  --danger-border: var(--red-900);
  --danger-hover-color: var(--red-1000);
  --danger-hover-background: var(--red-900);
  --danger-hover-border: var(--red-1000);
  --danger-active-color: var(--red-1000);
  --danger-active-background: var(--red-900);
  --danger-active-border: var(--red-1000);
  --danger-light-color: var(--red-50);
  --danger-light-background: var(--red-100);
  --danger-light-border: var(--red-300);
  --danger-light-hover-color: var(--red-50);
  --danger-light-hover-background: var(--red-200);
  --danger-light-hover-border: var(--red-400);
  --danger-light-active-color: var(--red-50);
  --danger-light-active-background: var(--red-200);
  --danger-light-active-border: var(--red-400);
  --warning-color: var(--orange-700);
  --warning-contrast-color: var(--orange-900);
  --warning-background: var(--orange-800);
  --warning-border: var(--orange-900);
  --warning-hover-color: var(--orange-1000);
  --warning-hover-background: var(--orange-900);
  --warning-hover-border: var(--orange-1000);
  --warning-active-color: var(--orange-1000);
  --warning-active-background: var(--orange-900);
  --warning-active-border: var(--orange-1000);
  --warning-light-color: var(--orange-50);
  --warning-light-background: var(--orange-100);
  --warning-light-border: var(--orange-300);
  --warning-light-hover-color: var(--orange-50);
  --warning-light-hover-background: var(--orange-200);
  --warning-light-hover-border: var(--orange-400);
  --warning-light-active-color: var(--orange-50);
  --warning-light-active-background: var(--orange-200);
  --warning-light-active-border: var(--orange-400);
  --info-color: var(--sky-700);
  --info-contrast-color: var(--sky-900);
  --info-background: var(--sky-800);
  --info-border: var(--sky-900);
  --info-hover-color: var(--sky-1000);
  --info-hover-background: var(--sky-900);
  --info-hover-border: var(--sky-1000);
  --info-active-color: var(--sky-1000);
  --info-active-background: var(--sky-900);
  --info-active-border: var(--sky-1000);
  --info-light-color: var(--sky-50);
  --info-light-background: var(--sky-100);
  --info-light-border: var(--sky-300);
  --info-light-hover-color: var(--sky-50);
  --info-light-hover-background: var(--sky-200);
  --info-light-hover-border: var(--sky-400);
  --info-light-active-color: var(--sky-50);
  --info-light-active-background: var(--sky-200);
  --info-light-active-border: var(--sky-400);
  --purple-color: var(--purple-800);
  --purple-contrast-color: var(--purple-900);
  --purple-background: var(--purple-800);
  --purple-border: var(--purple-900);
  --purple-hover-color: var(--purple-1000);
  --purple-hover-background: var(--purple-900);
  --purple-hover-border: var(--purple-1000);
  --purple-active-color: var(--purple-1000);
  --purple-active-background: var(--purple-900);
  --purple-active-border: var(--purple-1000);
  --purple-light-color: var(--purple-50);
  --purple-light-background: var(--purple-100);
  --purple-light-border: var(--purple-300);
  --purple-light-hover-color: var(--purple-50);
  --purple-light-hover-background: var(--purple-200);
  --purple-light-hover-border: var(--purple-400);
  --purple-light-active-color: var(--purple-50);
  --purple-light-active-background: var(--purple-200);
  --purple-light-active-border: var(--purple-400);
  --yellow-color: var(--yellow-700);
  --yellow-contrast-color: var(--yellow-900);
  --yellow-background: var(--yellow-800);
  --yellow-border: var(--yellow-900);
  --yellow-hover-color: var(--yellow-1000);
  --yellow-hover-background: var(--yellow-900);
  --yellow-hover-border: var(--yellow-1000);
  --yellow-active-color: var(--yellow-1000);
  --yellow-active-background: var(--yellow-900);
  --yellow-active-border: var(--yellow-1000);
  --yellow-light-color: var(--yellow-50);
  --yellow-light-background: var(--yellow-100);
  --yellow-light-border: var(--yellow-300);
  --yellow-light-hover-color: var(--yellow-50);
  --yellow-light-hover-background: var(--yellow-200);
  --yellow-light-hover-border: var(--yellow-400);
  --yellow-light-active-color: var(--yellow-50);
  --yellow-light-active-background: var(--yellow-200);
  --yellow-light-active-border: var(--yellow-400);
  --brown-color: var(--brown-800);
  --brown-contrast-color: var(--brown-900);
  --brown-background: var(--brown-800);
  --brown-border: var(--brown-900);
  --brown-hover-color: var(--brown-1000);
  --brown-hover-background: var(--brown-900);
  --brown-hover-border: var(--brown-1000);
  --brown-active-color: var(--brown-1000);
  --brown-active-background: var(--brown-900);
  --brown-active-border: var(--brown-1000);
  --brown-light-color: var(--brown-50);
  --brown-light-background: var(--brown-100);
  --brown-light-border: var(--brown-300);
  --brown-light-hover-color: var(--brown-50);
  --brown-light-hover-background: var(--brown-200);
  --brown-light-hover-border: var(--brown-400);
  --brown-light-active-color: var(--brown-50);
  --brown-light-active-background: var(--brown-200);
  --brown-light-active-border: var(--brown-400);
  --pink-color: var(--pink-800);
  --pink-contrast-color: var(--pink-900);
  --pink-background: var(--pink-800);
  --pink-border: var(--pink-900);
  --pink-hover-color: var(--pink-1000);
  --pink-hover-background: var(--pink-900);
  --pink-hover-border: var(--pink-1000);
  --pink-active-color: var(--pink-1000);
  --pink-active-background: var(--pink-900);
  --pink-active-border: var(--pink-1000);
  --pink-light-color: var(--pink-50);
  --pink-light-background: var(--pink-100);
  --pink-light-border: var(--pink-300);
  --pink-light-hover-color: var(--pink-50);
  --pink-light-hover-background: var(--pink-200);
  --pink-light-hover-border: var(--pink-400);
  --pink-light-active-color: var(--pink-50);
  --pink-light-active-background: var(--pink-200);
  --pink-light-active-border: var(--pink-400);
  --primary-button-background: var(--blue-800);
  --primary-button-color: var(--blue-50);
  --primary-button-border: var(--blue-900);
  --primary-button-hover-background: var(--blue-900);
  --primary-button-hover-color: var(--primary-button-color);
  --primary-button-hover-border: var(--blue-1000);
  --primary-button-focus-background: var(--blue-900);
  --primary-button-focus-color: var(--primary-button-color);
  --primary-button-focus-border: var(--blue-1000);
  --primary-button-disabled-background: var(--blue-800);
  --primary-button-disabled-color: var(--primary-button-color);
  --primary-button-disabled-border: var(--blue-900);
  --primary-button-active-background: var(--blue-1000);
  --primary-button-active-color: var(--primary-button-color);
  --primary-button-active-border: var(--blue-1000);
  --primary-button-light-color: var(--blue-900);
  --primary-button-light-hover-background: var(--blue-100);
  --primary-button-light-hover-color: var(--primary-button-light-color);
  --primary-button-light-focus-background: var(--blue-200);
  --primary-button-light-focus-color: var(--primary-button-light-color);
  --primary-button-light-disabled-background: #00000000;
  --primary-button-light-disabled-color: var(--primary-button-light-color);
  --primary-button-light-active-background: var(--blue-300);
  --primary-button-light-active-color: var(--blue-1000);
  --secondary-button-background: var(--grey-700);
  --secondary-button-color: var(--grey-50);
  --secondary-button-border: hsl(0deg 0% 0% / 15%);
  --secondary-button-hover-background: var(--grey-800);
  --secondary-button-hover-color: var(--secondary-button-color);
  --secondary-button-hover-border: var(--grey-900);
  --secondary-button-focus-background: var(--grey-800);
  --secondary-button-focus-color: var(--secondary-button-color);
  --secondary-button-focus-border: var(--grey-900);
  --secondary-button-disabled-background: var(--grey-700);
  --secondary-button-disabled-color: var(--secondary-button-color);
  --secondary-button-disabled-border: var(--grey-800);
  --secondary-button-active-background: var(--grey-900);
  --secondary-button-active-color: var(--secondary-button-color);
  --secondary-button-active-border: var(--grey-900);
  --secondary-button-light-color: var(--grey-800);
  --secondary-button-light-hover-background: var(--grey-200);
  --secondary-button-light-hover-color: var(--secondary-button-light-color);
  --secondary-button-light-focus-background: var(--grey-300);
  --secondary-button-light-focus-color: var(--secondary-button-light-color);
  --secondary-button-light-disabled-background: #00000000;
  --secondary-button-light-disabled-color: var(--secondary-button-light-color);
  --secondary-button-light-active-background: var(--grey-400);
  --secondary-button-light-active-color: var(--secondary-button-light-color);
  --danger-button-background: var(--red-700);
  --danger-button-color: var(--red-50);
  --danger-button-border: var(--red-800);
  --danger-button-hover-background: var(--red-800);
  --danger-button-hover-color: var(--danger-button-color);
  --danger-button-hover-border: var(--red-900);
  --danger-button-focus-background: var(--red-800);
  --danger-button-focus-color: var(--danger-button-color);
  --danger-button-focus-border: var(--red-900);
  --danger-button-disabled-background: var(--red-700);
  --danger-button-disabled-color: var(--danger-button-color);
  --danger-button-disabled-border: var(--red-800);
  --danger-button-active-background: var(--red-900);
  --danger-button-active-color: var(--danger-button-color);
  --danger-button-active-border: var(--red-1000);
  --danger-button-light-color: var(--red-700);
  --danger-button-light-hover-background: var(--red-200);
  --danger-button-light-hover-color: var(--red-900);
  --danger-button-light-focus-background: var(--red-300);
  --danger-button-light-focus-color: var(--red-900);
  --danger-button-light-disabled-background: #00000000;
  --danger-button-light-disabled-color: var(--red-900);
  --danger-button-light-active-background: var(--red-400);
  --danger-button-light-active-color: var(--red-1000);
  --success-button-background: var(--green-800);
  --success-button-color: var(--green-50);
  --success-button-border: var(--green-900);
  --success-button-hover-background: var(--green-900);
  --success-button-hover-color: var(--success-button-color);
  --success-button-hover-border: var(--green-1000);
  --success-button-focus-background: var(--green-900);
  --success-button-focus-color: var(--success-button-color);
  --success-button-focus-border: var(--green-1000);
  --success-button-disabled-background: var(--green-800);
  --success-button-disabled-color: var(--success-button-color);
  --success-button-disabled-border: var(--green-900);
  --success-button-active-background: var(--green-1000);
  --success-button-active-color: var(--success-button-color);
  --success-button-active-border: var(--green-1000);
  --success-button-light-color: var(--green-700);
  --success-button-light-hover-background: var(--green-100);
  --success-button-light-hover-color: var(--green-900);
  --success-button-light-focus-background: var(--green-200);
  --success-button-light-focus-color: var(--green-900);
  --success-button-light-disabled-background: #00000000;
  --success-button-light-disabled-color: var(--green-900);
  --success-button-light-active-background: var(--green-300);
  --success-button-light-active-color: var(--green-900);
  --warning-button-background: var(--orange-400);
  --warning-button-color: var(--orange-900);
  --warning-button-border: var(--orange-500);
  --warning-button-hover-background: var(--orange-500);
  --warning-button-hover-color: var(--orange-50);
  --warning-button-hover-border: var(--orange-600);
  --warning-button-focus-background: var(--orange-600);
  --warning-button-focus-color: var(--orange-50);
  --warning-button-focus-border: var(--orange-700);
  --warning-button-disabled-background: var(--orange-400);
  --warning-button-disabled-color: var(--warning-button-color);
  --warning-button-disabled-border: var(--orange-500);
  --warning-button-active-background: var(--orange-700);
  --warning-button-active-color: var(--orange-50);
  --warning-button-active-border: var(--orange-800);
  --warning-button-light-color: var(--orange-700);
  --warning-button-light-hover-background: var(--orange-100);
  --warning-button-light-hover-color: var(--orange-900);
  --warning-button-light-focus-background: var(--orange-200);
  --warning-button-light-focus-color: var(--orange-900);
  --warning-button-light-disabled-background: #00000000;
  --warning-button-light-disabled-color: var(--orange-900);
  --warning-button-light-active-background: var(--orange-300);
  --warning-button-light-active-color: var(--orange-900);
  --info-button-background: var(--sky-700);
  --info-button-color: var(--sky-50);
  --info-button-border: var(--sky-800);
  --info-button-hover-background: var(--sky-800);
  --info-button-hover-color: var(--info-button-color);
  --info-button-hover-border: var(--sky-900);
  --info-button-focus-background: var(--sky-800);
  --info-button-focus-color: var(--info-button-color);
  --info-button-focus-border: var(--sky-900);
  --info-button-disabled-background: var(--sky-700);
  --info-button-disabled-color: var(--info-button-color);
  --info-button-disabled-border: var(--sky-800);
  --info-button-active-background: var(--sky-900);
  --info-button-active-color: var(--info-button-color);
  --info-button-active-border: var(--sky-1000);
  --info-button-light-color: var(--sky-700);
  --info-button-light-hover-background: var(--sky-200);
  --info-button-light-hover-color: var(--sky-900);
  --info-button-light-focus-background: var(--sky-300);
  --info-button-light-focus-color: var(--sky-900);
  --info-button-light-disabled-background: #00000000;
  --info-button-light-disabled-color: var(--sky-900);
  --info-button-light-active-background: var(--sky-400);
  --info-button-light-active-color: var(--sky-1000);
  --primary-badge-background: var(--blue-800);
  --primary-badge-color: var(--blue-50);
  --primary-badge-light-background: var(--blue-200);
  --primary-badge-light-color: var(--blue-1000);
  --secondary-badge-background: var(--grey-700);
  --secondary-badge-color: var(--grey-50);
  --secondary-badge-light-background: var(--grey-300);
  --secondary-badge-light-color: var(--grey-800);
  --danger-badge-background: var(--red-600);
  --danger-badge-color: var(--white);
  --danger-badge-light-background: var(--red-200);
  --danger-badge-light-color: var(--red-1000);
  --success-badge-background: var(--green-700);
  --success-badge-color: var(--green-75);
  --success-badge-light-background: var(--green-200);
  --success-badge-light-color: var(--green-900);
  --warning-badge-background: var(--orange-500);
  --warning-badge-color: var(--orange-1000);
  --warning-badge-light-background: var(--orange-200);
  --warning-badge-light-color: var(--orange-1000);
  --info-badge-background: var(--sky-600);
  --info-badge-color: var(--sky-50);
  --info-badge-light-background: var(--sky-300);
  --info-badge-light-color: var(--sky-1000);
  --purple-badge-background: var(--purple-800);
  --purple-badge-color: var(--purple-75);
  --purple-badge-light-background: var(--purple-200);
  --purple-badge-light-color: var(--purple-900);
  --yellow-badge-background: var(--yellow-500);
  --yellow-badge-color: var(--yellow-1000);
  --yellow-badge-light-background: var(--yellow-200);
  --yellow-badge-light-color: var(--yellow-900);
  --brown-badge-background: var(--brown-800);
  --brown-badge-color: var(--brown-50);
  --brown-badge-light-background: var(--brown-200);
  --brown-badge-light-color: var(--brown-1000);
  --pink-badge-background: var(--pink-800);
  --pink-badge-color: var(--pink-50);
  --pink-badge-light-background: var(--pink-200);
  --pink-badge-light-color: var(--pink-1000);
  --inverse-badge-background: var(--grey-900);
  --inverse-badge-color: var(--grey-50);
  --inverse-badge-light-background: var(--grey-500);
  --inverse-badge-light-color: var(--grey-900);
  --input-color: var(--body-text-color);
  --input-bg: var(--body-background-top);
  --input-border: var(--border-color);
  --input-hover-border: var(--border-hover-color);
  --input-focus-border: var(--blue-500);
  --input-focus-color: var(--body-text-color);
  --input-focus-bg: var(--body-background-top);
  --input-disabled-color: var(--muted-text-color);
  --input-disabled-bg: var(--body-background-middle);
  --input-readonly-color: var(--input-disabled-color);
  --input-readonly-bg: var(--input-disabled-bg);
  --input-readonly-border: var(--input-border);
  --input-readonly-focus-border: var(--border-color);
  --input-readonly-focus-bg: var(--body-background-top);
  --input-placeholder-color: var(--muted-text-color);
  --switch-background: var(--grey-400);
  --switch-background-checked: var(--blue-800);
  --switch-knob-background: var(--grey-75);
  --switch-knob-background-checked: var(--blue-75);
  --switch-border: var(--grey-500);
  --switch-border-checked: var(--blue-800);
  --switch-focus-border: var(--input-focus-border);
  --switch-disabled-background: var(--switch-background);
  --switch-disabled-background-checked: var(--switch-background-checked);
  --table-striped: var(--body-background-middle);
  --table-striped-danger-odd: var(--danger-light-active-background);
  --table-striped-danger-even: var(--danger-light-background);
  --table-striped-success-odd: var(--success-light-active-background);
  --table-striped-success-even: var(--success-light-background);
  --table-striped-warning-odd: var(--warning-light-active-background);
  --table-striped-warning-even: var(--warning-light-background);
  --table-striped-info-odd: var(--info-light-active-background);
  --table-striped-info-even: var(--info-light-background);
  --table-striped-purple-odd: var(--purple-light-active-background);
  --table-striped-purple-even: var(--purple-light-background);
  --shadow-xs: 0 1px 0 0 rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px -1px rgba(0,0,0,0.08), 0 1px 1px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.12), 0 4px 8px -2px rgba(0,0,0,0.06);
  --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.18);
  --shadow-focus: 0 0 0 2px hsl(199, 100%, 86%);
  --card-box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --app-sidebar-w: 240px;
  --app-topbar-h: 52px;
  --app-max-w: 1440px;
  --button-border-radius: 0.5rem;
  --card-border-radius: 0.5rem;
  --dropdown-border-radius: 0.5rem;
  --input-border-radius: 0.25rem;
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-loose: 1.65;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --h-font-weight: 600;
  --input-focus-ring: 0 0 0 2px hsl(199, 100%, 86%);
  --switch-focus-ring: 0 0 0 2px hsl(199, 100%, 86%);
  --font-family: -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Source Sans Pro", "Roboto", "Trebuchet MS";
  --text-fs-11: 400 11px/1.4 var(--font-family);
  --text-fs-12: 400 12px/1.4 var(--font-family);
  --text-fs-13: 400 13px/1.4 var(--font-family);
  --text-fs-14: 400 14px/1.4 var(--font-family);
  --text-fs-15: 400 15px/1.4 var(--font-family);
  --text-fs-16: 400 16px/1.4 var(--font-family);
  --text-fs-18: 400 18px/1.4 var(--font-family);
  --text-fs-20: 400 20px/1.4 var(--font-family);
  --text-fs-24: 400 24px/1.4 var(--font-family);
  --text-fs-28: 400 28px/1.4 var(--font-family);
  --text-fs-32: 400 32px/1.4 var(--font-family);
  --text-fs-40: 400 40px/1.4 var(--font-family);
  --text-fs-48: 400 48px/1.4 var(--font-family);
  --text-font: 400 14px/1.4 var(--font-family);
  --text-h1: 600 28px/1.2 var(--font-family); /* From `h1, .h1` in colors_and_type.css; also `.h1`. */
  --text-h2: 600 20px/1.35 var(--font-family); /* From `h2, .h2` in colors_and_type.css; also `.h2`. */
  --text-h3: 600 16px/1.35 var(--font-family); /* From `h3, .h3` in colors_and_type.css; also `.h3`. */
  --text-h4: 600 14px/1.35 var(--font-family); /* From `h4, .h4` in colors_and_type.css — uppercase; also `.h4`. */
  --text-p: 400 14px/1.5 var(--font-family); /* From `p, .body` in colors_and_type.css. Same as .body. */
  --text-code: 400 0.92em/1.5 var(--font-family); /* From `.mono, code, kbd, pre, samp` in colors_and_type.css — its font-family var(--font-mono) is not one of the system’s font tokens. */
  --text-pre: 400 0.92em/1.5 var(--font-family); /* From `.mono, code, kbd, pre, samp` in colors_and_type.css — its font-family var(--font-mono) is not one of the system’s font tokens. */
  --text-kbd: 400 0.92em/1.5 var(--font-family); /* From `.mono, code, kbd, pre, samp` in colors_and_type.css — its font-family var(--font-mono) is not one of the system’s font tokens. */
  --text-body-sm: 400 13px/1.5 var(--font-family); /* From `.body-sm` in colors_and_type.css. */
  --text-caption: 400 12px/1.35 var(--font-family); /* From `.caption` in colors_and_type.css. */
  --text-overline: 600 11px/1.5 var(--font-family); /* From `.overline` in colors_and_type.css — uppercase. */
  --text-mono: 400 11px/1.5 var(--font-family); /* From `.mono, code, kbd, pre, samp` · `.mono` in colors_and_type.css, preview/_card.css — its font-family ui-monospace, SFMono-Regular, Menlo, Consolas, mon is not one of the system’s font tokens. */
}
.fs-11 {
  font-family: var(--font-family);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-12 {
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-13 {
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-14 {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-15 {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-16 {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-18 {
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-20 {
  font-family: var(--font-family);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-24 {
  font-family: var(--font-family);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-28 {
  font-family: var(--font-family);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-32 {
  font-family: var(--font-family);
  font-size: 32px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-40 {
  font-family: var(--font-family);
  font-size: 40px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-48 {
  font-family: var(--font-family);
  font-size: 48px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.font {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-family);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.h2 {
  font-family: var(--font-family);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
.h4 {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.p {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-family);
  font-size: 0.92em;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.pre {
  font-family: var(--font-family);
  font-size: 0.92em;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.kbd {
  font-family: var(--font-family);
  font-size: 0.92em;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
}
.overline {
  font-family: var(--font-family);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.mono {
  font-family: var(--font-family);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}