/* Auto-generated from Figma design tokens. Do not edit manually. */
/* Run: npm run generate:tokens (from website/) or npm run website:generate-tokens (from root) */

:root {

  /* color */
  --color-blue-100: #e2e9f8;
  --color-blue-200: #cbd8f7;
  --color-blue-300: #a8c1f9;
  --color-blue-400: #85a9fd;
  --color-blue-50: #fcfdfe;
  --color-blue-500: #5b8cff;
  --color-blue-600: #0737a6;
  --color-blue-700: #09225d;
  --color-blue-800: #071127;
  --color-blue-900: #040810;
  --color-blue-base: #5b8cff;
  --color-green-100: #dff3df;
  --color-green-200: #c6efc7;
  --color-green-300: #a1eca1;
  --color-green-400: #7bea7b;
  --color-green-50: #fcfefc;
  --color-green-500: #4de64d;
  --color-green-600: #18811a;
  --color-green-700: #135313;
  --color-green-800: #0b230b;
  --color-green-900: #060f06;
  --color-green-base: #4de64d;
  --color-grey-100: #e8e6e6;
  --color-grey-150: #d2cece;
  --color-grey-200: #bcb5b5;
  --color-grey-250: #a69d9d;
  --color-grey-300: #908484;
  --color-grey-350: #5e5555;
  --color-grey-400: #534646;
  --color-grey-450: #463939;
  --color-grey-50: #f7f6f6;
  --color-grey-500: #2a2222;
  --color-grey-550: #1d1616;
  --color-grey-600: #0f0b0b;
  --color-grey-650: #060404;
  --color-grey-base: #7a6c6c;
  --color-orange-100: #f6e7dc;
  --color-orange-200: #f5d6bf;
  --color-orange-300: #f8bf94;
  --color-orange-400: #fca769;
  --color-orange-50: #fefdfc;
  --color-orange-500: #ff8a34;
  --color-orange-600: #a64b07;
  --color-orange-700: #5d2d09;
  --color-orange-800: #271507;
  --color-orange-900: #100904;
  --color-orange-base: #ff8a34;
  --color-pink-100: #f1dee9;
  --color-pink-200: #eac4da;
  --color-pink-300: #e49fc6;
  --color-pink-400: #df79b3;
  --color-pink-50: #fefcfd;
  --color-pink-500: #d84a9b;
  --color-pink-600: #8a235e;
  --color-pink-700: #4e1837;
  --color-pink-800: #210d18;
  --color-pink-900: #0e060b;
  --color-pink-base: #d84a9b;
  --color-purple-100: #ebe5f9;
  --color-purple-200: #ddd0f8;
  --color-purple-300: #c9b2fa;
  --color-purple-400: #b493fd;
  --color-purple-50: #fdfcfe;
  --color-purple-500: #9b6dff;
  --color-purple-600: #3907a6;
  --color-purple-700: #24095d;
  --color-purple-800: #110727;
  --color-purple-900: #080410;
  --color-purple-base: #9b6dff;
  --color-red-100: #f0d6d6;
  --color-red-200: #ebb5b5;
  --color-red-300: #e78585;
  --color-red-400: #e55454;
  --color-red-50: #fefcfc;
  --color-red-500: #db1d1d;
  --color-red-600: #941a1a;
  --color-red-700: #531313;
  --color-red-800: #230b0b;
  --color-red-900: #0e0707;
  --color-red-base: #db1d1d;
  --color-teal-100: #dff0ee;
  --color-teal-200: #c6eae5;
  --color-teal-300: #a1e4db;
  --color-teal-400: #7cded2;
  --color-teal-50: #fcfefd;
  --color-teal-500: #4fd6c5;
  --color-teal-600: #238075;
  --color-teal-700: #194d46;
  --color-teal-800: #0d211e;
  --color-teal-900: #070e0d;
  --color-teal-base: #4fd6c5;
  --color-transparent-dark-10: rgba(0, 0, 0, 0.10000000149011612);
  --color-transparent-dark-20: rgba(0, 0, 0, 0.20000000298023224);
  --color-transparent-dark-30: rgba(0, 0, 0, 0.30000001192092896);
  --color-transparent-dark-40: rgba(0, 0, 0, 0.4000000059604645);
  --color-transparent-dark-50: rgba(0, 0, 0, 0.5);
  --color-transparent-dark-60: rgba(0, 0, 0, 0.6000000238418579);
  --color-transparent-dark-70: rgba(0, 0, 0, 0.699999988079071);
  --color-transparent-dark-80: rgba(0, 0, 0, 0.800000011920929);
  --color-transparent-dark-90: rgba(0, 0, 0, 0.8999999761581421);
  --color-transparent-light-10: rgba(255, 255, 255, 0.10000000149011612);
  --color-transparent-light-20: rgba(255, 255, 255, 0.20000000298023224);
  --color-transparent-light-30: rgba(255, 255, 255, 0.30000001192092896);
  --color-transparent-light-40: rgba(255, 255, 255, 0.4000000059604645);
  --color-transparent-light-50: rgba(255, 255, 255, 0.5);
  --color-transparent-light-60: rgba(255, 255, 255, 0.6000000238418579);
  --color-transparent-light-70: rgba(255, 255, 255, 0.699999988079071);
  --color-transparent-light-80: rgba(255, 255, 255, 0.800000011920929);
  --color-transparent-light-90: rgba(255, 255, 255, 0.8999999761581421);
  --color-yellow-100: #f7f2e0;
  --color-yellow-200: #f7ecc6;
  --color-yellow-300: #f9e6a1;
  --color-yellow-400: #fce07b;
  --color-yellow-50: #fefefc;
  --color-yellow-500: #ffd84d;
  --color-yellow-600: #d49b00;
  --color-yellow-700: #5d4a09;
  --color-yellow-800: #272007;
  --color-yellow-900: #100e04;
  --color-yellow-base: #ffd84d;
  --color-accent: #db1d1d;
  --color-always-dark: #0e0707;
  --color-always-light: #fefcfc;
  --color-backdrop: rgba(0, 0, 0, 0.800000011920929);
  --color-background-disabled: #060404;
  --color-background-inverted-disabled: #e8e6e6;
  --color-background-inverted-primary: #f7f6f6;
  --color-background-inverted-secondary: #d2cece;
  --color-background-inverted-tertiary: #bcb5b5;
  --color-background-negative-dark: #db1d1d;
  --color-background-negative-light: #ebb5b5;
  --color-background-positive-dark: #18811a;
  --color-background-positive-light: #c6efc7;
  --color-background-primary: #0e0707;
  --color-background-secondary: #0f0b0b;
  --color-background-tertiary: #1d1616;
  --color-background-translucent-strong: rgba(255, 255, 255, 0.20000000298023224);
  --color-background-translucent-subtle: rgba(255, 255, 255, 0.10000000149011612);
  --color-background-warning-dark: #ffd84d;
  --color-background-warning-light: #f7ecc6;
  --color-border-disabled: #1d1616;
  --color-border-inverted-disabled: #e8e6e6;
  --color-border-inverted-opaque: #d2cece;
  --color-border-inverted-strong: #2a2222;
  --color-border-inverted-subtle: #a69d9d;
  --color-border-opaque: #2a2222;
  --color-border-strong: #d2cece;
  --color-border-subtle: #5e5555;
  --color-cycle-phase-1: #ff3d3d;
  --color-cycle-phase-2: #ffd53d;
  --color-cycle-phase-3: #57f249;
  --color-cycle-phase-4: #ffd53d;
  --color-cycle-phase-5: #ff3d3d;
  --color-foreground-disabled: #2a2222;
  --color-foreground-inverted-disabled: #d2cece;
  --color-foreground-inverted-primary: #060404;
  --color-foreground-inverted-secondary: #463939;
  --color-foreground-inverted-tertiary: #a69d9d;
  --color-foreground-primary: #f7f6f6;
  --color-foreground-secondary: #a69d9d;
  --color-foreground-tertiary: #5e5555;
  --color-negative: #db1d1d;
  --color-positive: #18811a;
  --color-warning: #ffd84d;

  /* spacing */
  --spacing-between-action-airy: 12px;
  --spacing-between-action-base: 8px;
  --spacing-between-element-airy: 12px;
  --spacing-between-element-base: 8px;
  --spacing-between-element-spacious: 16px;
  --spacing-between-element-tight: 4px;
  --spacing-between-group-airy: 32px;
  --spacing-between-group-base: 24px;
  --spacing-between-group-compact: 16px;
  --spacing-between-group-micro: 8px;
  --spacing-between-group-spacious: 40px;
  --spacing-between-group-tight: 12px;
  --spacing-between-paragraph-base: 24px;
  --spacing-between-section-airy: 32px;
  --spacing-between-section-base: 24px;
  --spacing-between-section-spacious: 48px;
  --spacing-between-section-tight: 16px;
  --spacing-grid-gutter-airy: 20px;
  --spacing-grid-gutter-base: 16px;
  --spacing-grid-gutter-micro: 4px;
  --spacing-grid-gutter-spacious: 24px;
  --spacing-grid-gutter-tight: 8px;
  --spacing-grid-margin-airy: 32px;
  --spacing-grid-margin-base: 24px;
  --spacing-grid-margin-tight: 12px;
  --spacing-inset-airy: 32px;
  --spacing-inset-base: 24px;
  --spacing-inset-compact: 16px;
  --spacing-inset-micro: 8px;
  --spacing-inset-nano: 4px;
  --spacing-inset-relaxed: 20px;
  --spacing-inset-spacious: 40px;
  --spacing-inset-tight: 12px;
  --spacing-inset-tiny: 10px;
  --spacing-nudge-micro: 1px;
  --spacing-nudge-tight: 4px;
  --spacing-nudge-tiny: 2px;

  /* radius */
  --radius-base: 16px;
  --radius-huge: 60px;
  --radius-large: 40px;
  --radius-medium: 24px;
  --radius-micro: 2px;
  --radius-round: 9999px;
  --radius-small: 8px;
  --radius-subtle: 12px;
  --radius-tiny: 4px;

  /* border */
  --border-bold: 4px;
  --border-light: 1px;
  --border-medium: 1.5px;
  --border-semi-bold: 2px;
  --border-thin: 0.5px;

  /* opacity */
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-state-pressed: 0.8;

  /* font-family */
  --font-family-font-sans: Inter;
  --font-family-font-serif: Instrument Serif;

  /* font-size */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;

  /* font-weight */
  --font-weight-black: Black;
  --font-weight-black-italic: Black Italic;
  --font-weight-bold: Bold;
  --font-weight-bold-italic: Bold Italic;
  --font-weight-extra-bold: Extra Bold;
  --font-weight-extra-bold-italic: Extra Bold Italic;
  --font-weight-extra-light: Extra Light;
  --font-weight-extra-light-italic: Extra Light Italic;
  --font-weight-italic: Italic;
  --font-weight-light: Light;
  --font-weight-light-italic: Light Italic;
  --font-weight-medium: Medium;
  --font-weight-medium-italic: Medium Italic;
  --font-weight-regular: Regular;
  --font-weight-semi-bold: Semi Bold;
  --font-weight-semi-bold-italic: Semi Bold Italic;
  --font-weight-thin: Thin;
  --font-weight-thin-italic: Thin Italic;

  /* line-height */
  --line-height-16: 16px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-28: 28px;
  --line-height-32: 32px;
  --line-height-36: 36px;
  --line-height-44: 44px;
  --line-height-48: 48px;
  --line-height-56: 56px;
  --line-height-80: 80px;

  /* letter-spacing */
  --letter-spacing-0: 0px;
}