:root {
  /* These are generated from figma, please do not edit manually */
  /* Also, you should not be using PRIMITIVES in your code, please only use the semantic variables below */

  /* -------------------------------- PRIMITIVE ------------------------------- */

  --white: #ffffff;
  --black: #000000;
  --cobalt-10: #001a43;
  --cobalt-20: #002b5f;
  --cobalt-30: #003778;
  --cobalt-40: #004292;
  --cobalt-50: #004eab;
  --cobalt-60: #0054b9;
  --cobalt-70: #0065de;
  --cobalt-80: #1f85ff;
  --cobalt-90: #99c7ff;
  --cobalt-95: #d6e9ff;
  --cobalt-99: #f8fafc;
  --slate-10: #1e1e29;
  --slate-15: #081b37;
  --slate-20: #1f304d;
  --slate-30: #364765;
  --slate-40: #4d5e80;
  --slate-50: #8091b3;
  --slate-60: #9aaccf;
  --slate-70: #d3d9e5;
  --slate-80: #e6eaf0;
  --slate-90: #f0f2f6;
  --slate-95: #f6f6fb;
  --slate-99: #f6f8fa;
  --red-10: #410004;
  --red-20: #68000b;
  --red-30: #930014;
  --red-40: #af1622;
  --red-50: #c31826;
  --red-60: #de3539;
  --red-70: #ff4d4d;
  --red-80: #ff7f7f;
  --red-90: #ffa1a1;
  --red-95: #ffd3d3;
  --red-99: #fff4f4;
  --plum-10: #36003d;
  --green-10: #004633;
  --green-20: #005740;
  --green-30: #006d50;
  --green-40: #008864;
  --green-50: #00aa7d;
  --green-60: #00d49c;
  --green-70: #33ddb0;
  --green-80: #7addc3;
  --green-90: #cdf2e8;
  --green-95: #d7f5ed;
  --green-99: #f2fcf9;
  --plum-20: #580062;
  --plum-30: #791384;
  --plum-40: #8d3096;
  --plum-50: #b24eba;
  --plum-60: #cf68d6;
  --plum-70: #ed83f3;
  --plum-80: #fea9ff;
  --plum-90: #ffd6fb;
  --plum-95: #ffebfa;
  --plum-99: #fffbff;
  --slate15_8: #081b3714;
  --slate15_12: #081b371e;
  --red50_8: #c3182619;
  --red40_12: #af16222d;
  --cobalt40_8: #0054b914;
  --cobalt40_12: #0054b91e;
  --plum40_8: #8d309614;
  --plum40_12: #8d30961e;
  --slate95_15: #f0f2f626;
  --slate95_25: #f0f2f63f;
  --cobalt95_10: #99c7ff2d;
  --cobalt80_30: #99c7ff3f;
  --red70_10: #ff4d4d1e;
  --red80_30: #ff7f7f4c;
  --plum70_10: #ed83f31e;
  --plum80_30: #fea9ff4c;
  --green40_12: #0088641e;
  --green40_20: #00886433;

  /* These are the variables you should be using in your components! */
  /* -------------------------------- SEMANTIC -------------------------------- */

  --neutral-text: var(--slate-10);
  --neutral-text-medium: var(--slate-40);
  --neutral-text-dim: var(--slate-50);
  --neutral-text-disabled: var(--slate-60);
  --neutral-background: var(--white);
  --neutral-background-dim: var(--slate-99);
  --neutral-background-medium: var(--slate-90);
  --neutral-background-strong: var(--slate-80);
  --neutral-icon: var(--slate-40);
  --neutral-icon-dim: var(--slate-50);
  --neutral-border: var(--slate-70);
  --neutral-border-dim: var(--slate-90);
  --neutral-divider: var(--slate-70);
  --neutral-background-inverse: var(--slate-15);
  --neutral-text-inverse: var(--slate-99);
  --neutral-icon-inverse: var(--slate-99);
  --primary-text: var(--cobalt-60);
  --primary-text-dim: var(--cobalt-99);
  --primary-background-dim: var(--cobalt-99);
  --primary-background: var(--cobalt-95);
  --primary-background-medium: var(--cobalt-80);
  --primary-background-strong: var(--cobalt-60);
  --primary-icon: var(--cobalt-60);
  --primary-icon-dim: var(--cobalt-99);
  --primary-border: var(--cobalt-60);
  --primary-border-dim: var(--cobalt-90);
  --primary-background-hover: var(--cobalt-50);
  --accent-text: var(--plum-40);
  --accent-text-dim: var(--plum-99);
  --accent-border: var(--plum-40);
  --accent-icon: var(--plum-40);
  --accent-icon-dim: var(--plum-99);
  --accent-background: var(--plum-95);
  --accent-background-strong: var(--plum-40);
  --negative-text: var(--red-30);
  --affirmative-text: var(--green-30);
  --affirmative-text-medium: var(--green-40);
  --affirmative-text-dim: var(--green-99);
  --affirmative-background: var(--green-99);
  --affirmative-background-medium: var(--green-95);
  --affirmative-icon: var(--green-40);
  --affirmative-icon-dim: var(--green-99);
  --affirmative-border: var(--green-40);
  --negative-text-medium: var(--red-40);
  --negative-text-dim: var(--red-99);
  --negative-icon: var(--red-40);
  --negative-icon-dim: var(--red-99);
  --negative-background: var(--red-99);
  --negative-background-medium: var(--red-95);
  --negative-background-strong: var(--red-40);
  --negative-border: var(--red-40);
  --neutral-hover: var(--slate15_8);
  --neutral-select: var(--slate15_12);
  --negative-hover: var(--red50_8);
  --negative-select: var(--red40_12);
  --primary-hover: var(--cobalt40_8);
  --primary-select: var(--cobalt40_12);
  --accent-hover: var(--plum40_8);
  --accent-select: var(--plum40_12);
  --affirmative-hover: var(--green40_12);
  --affirmative-select: var(--green40_20);
  --black: #000000;
  --white: #ffffff;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-999: 999px;
  --spacer-2: 2px;
  --spacer-4: 4px;
  --spacer-6: 6px;
  --spacer-8: 8px;
  --spacer-12: 12px;
  --spacer-16: 16px;
  --spacer-20: 20px;
  --spacer-24: 24px;
  --spacer-32: 32px;
  --spacer-36: 36px;
  --spacer-48: 48px;
  --spacer-64: 64px;
  --size-xs: 16px;
  --size-sm: 20px;
  --size-md: 24px;
  --size-lg: 32px;
  --size-xl: 40px;

  /* Fonts */
  --font-family-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-serif: 'Literata', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;

  /* Type scale */
  --font-size-xs: 11px;
  --font-size-xs--line-height: 16px;
  --font-size-sm: 12px;
  --font-size-sm--line-height: 16px;
  --font-size-base: 12px;
  --font-size-base--line-height: 20px;
  --font-size-lg: 16px;
  --font-size-lg--line-height: 24px;
  --font-size-xl: 22px;
  --font-size-xl--line-height: 28px;
  --font-size-2xl: 28px;
  --font-size-2xl--line-height: 36px;
  --font-size-3xl: 32px;
  --font-size-3xl--line-height: 40px;

  /* Widths */
  --width-3xs: 16rem;
  --width-2xs: 18rem;
  --width-xs: 20rem;
  --width-sm: 24rem;
  --width-md: 28rem;
  --width-lg: 32rem;
  --width-xl: 36rem;
  --width-2xl: 42rem;
  --width-3xl: 48rem;
  --width-4xl: 56rem;
  --width-5xl: 64rem;
  --width-6xl: 72rem;
  --width-7xl: 80rem;
  --width-prose: 65ch;

  /* Animations */
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;

  /* Transitions */
  --transition-timing-function-linear: linear;
  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Button defaults */
  --button-height: var(--spacer-32);
  --button-font-weight: 500;
  --button-radius: var(--radius-4);
  --button-font-size: var(--font-size-base);
}