/* Generated by screenshot-to-tokens. Review before merging. */
:root {
  /* primitive */
  --color-black: #000000;
  --color-black-a40: #00000066;
  --color-black-a13: #00000020;
  --color-black-a10: #0000001a;
  --color-black-a30: #0000004d;
  --color-gray-900: #212529;
  --color-gray-800: #333333;
  --color-gray-500: #777777;
  --color-gray-400: #888888;
  --color-red-400: #fb404b;
  --color-gray-400-2: #9a9a9a;
  --color-gray-300: #a9a9a9;
  --color-teal-300: #1dc7ea;
  --color-orange-200: #ffa534;
  --color-gray-200-a15: #cbcbd226;
  --color-gray-100: #dee2e6;
  --color-gray-100-2: #e7e7e7;
  --color-white: #ffffff;
  --color-white-a23: #ffffff3b;
  --color-white-a20: #ffffff33;
  --font-family-base: Roboto, Helvetica Neue, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-line-height-1: 16px;
  --font-line-height-2: 18px;
  --font-line-height-3: 21px;
  --font-line-height-4: 24px;
  --font-line-height-5: 30px;
  --font-line-height-6: 40px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;
  --space-100: 100px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  /* semantic */
  --color-action-primary: var(--color-white-a23);
  --color-surface-default: var(--color-white);
  --color-text-default: var(--color-gray-900);
  --color-text-muted: var(--color-gray-400-2);
  --color-text-inverse: var(--color-white);
  --color-border-default: var(--color-black-a13);
  /* component */
  --button-bg: var(--color-action-primary);
  --button-text: var(--color-text-inverse);
  --button-radius: var(--radius-sm);
  --card-bg: var(--color-surface-default);
  --card-border: var(--color-border-default);
  --card-text: var(--color-text-default);
  --card-radius: var(--radius-sm);
  --nav-bg: var(--color-surface-default);
  --nav-border: var(--color-black-a10);
  --footer-bg: var(--color-surface-default);
  --footer-text: var(--color-gray-500);
  --link-text: var(--color-text-inverse);
  --link-radius: var(--radius-sm);
  --button-active-bg: var(--color-action-primary);
}