/* Generated by screenshot-to-tokens. Review before merging. */
:root {
  /* primitive */
  --color-black-a5: #0000000d;
  --color-black-a50: #00000080;
  --color-black-a90: #000000e6;
  --color-black-a10: #0000001a;
  --color-blue-800: #32325d;
  --color-blue-600: #525f7f;
  --color-blue-500: #5e72e4;
  --color-red-500: #f5365c;
  --color-red-400: #fb6340;
  --color-blue-400: #8898aa;
  --color-gray-300: #adb5bd;
  --color-green-300: #2dce89;
  --color-teal-200: #11cdef;
  --color-gray-200: #ced4da;
  --color-yellow-100: #ffd600;
  --color-gray-100: #e9ecef;
  --color-white: #ffffff;
  --color-white-a60: #ffffff99;
  --color-white-a95: #fffffff2;
  --font-family-base: Open Sans, sans-serif;
  --font-size-xs: 10.4px;
  --font-size-sm: 13px;
  --font-size-md: 14.4px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-line-height-1: 15.6px;
  --font-line-height-2: 18px;
  --font-line-height-3: 19.5px;
  --font-line-height-4: 21.6px;
  --font-line-height-5: 23.8px;
  --font-line-height-6: 25.5px;
  --font-line-height-7: 30px;
  --space-neg-96: -96px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10-4: 10.4px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-39: 39px;
  --space-48: 48px;
  --space-128: 128px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 32px;
  --shadow-1: rgba(136, 152, 170, 0.15) 0px 0px 32px 0px;
  --shadow-2: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px inset;
  --shadow-3: rgba(50, 50, 93, 0.11) 0px 4px 6px 0px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px;
  --shadow-4: rgba(50, 50, 93, 0.15) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 1px 0px 0px;
  /* semantic */
  --color-action-primary: var(--color-blue-500);
  --color-surface-default: var(--color-white);
  --color-surface-card: var(--color-white);
  --color-text-default: var(--color-blue-600);
  --color-text-muted: var(--color-blue-400);
  --color-text-on-primary: var(--color-white);
  --color-border-default: var(--color-gray-100);
  /* component */
  --button-bg: var(--color-action-primary);
  --button-text: var(--color-text-on-primary);
  --button-border: var(--color-action-primary);
  --button-radius: var(--radius-md);
  --button-shadow: var(--shadow-3);
  --input-border: var(--color-white-a60);
  --input-radius: var(--radius-lg);
  --input-shadow: var(--shadow-4);
  --card-bg: var(--color-surface-card);
  --card-border: var(--color-border-default);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-1);
  --nav-bg: var(--color-surface-default);
  --nav-border: var(--color-black-a10);
  --nav-shadow: var(--shadow-1);
  --badge-bg: var(--color-gray-300);
  --link-text: var(--color-black-a50);
  --button-active-bg: var(--color-action-primary);
  --link-active-bg: var(--color-surface-default);
}