/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --alert-300: var(--cafe-red-300); /* @kind color */
  --alert-500: var(--cafe-red-500); /* @kind color */
  --alert-alert: rgb(255,59,48); /* @kind color */
  --alerts-alert-2: rgb(250,85,49); /* @kind color */
  --alerts-alert: rgb(250,85,49); /* @kind color */
  --alpha-tints-cafe-black-12: rgba(35,32,32,0.12); /* @kind color */
  --alpha-tints-cafe-white-12: rgba(248,248,249,0.12); /* @kind color */
  --alts-cafe-cyan-pastel: rgb(169,255,255); /* @kind color */
  --alts-cafe-cyan: rgb(0,184,184); /* @kind color */
  --alts-cafe-magenta-pastel: rgb(255,223,254); /* @kind color */
  --alts-cafe-magenta: rgb(221,93,210); /* @kind color */
  --alts-cafe-orange-pastel: rgb(255,232,175); /* @kind color */
  --alts-cafe-orange: rgb(250,170,120); /* @kind color */
  --alts-cafe-pink-pastel: rgb(255,219,230); /* @kind color */
  --alts-cafe-pink: rgb(252,71,125); /* @kind color */
  --alts-cafe-purple-pastel: rgb(232,214,255); /* @kind color */
  --alts-cafe-purple: rgb(120,75,240); /* @kind color */
  --alts-cafe-red: rgb(250,85,49); /* @kind color */
  --alts-cafe-yellow-pastel: rgb(254,250,216); /* @kind color */
  --always-black: var(--neutral-950); /* @kind color */
  --always-white-2: var(--neutral-50); /* @kind color */
  --always-white: var(--tints-cafe-white); /* @kind color */
  --background-background: rgb(244,246,249); /* @kind color */
  --backgrounds-background-2: rgb(248,248,249); /* @kind color */
  --backgrounds-background: rgb(248,248,249); /* @kind color */
  --backgrounds-bg-light: var(--tints-cafe-white-bright); /* @kind color */
  --backgrounds-secondarybackground-2: rgb(35,32,32); /* @kind color */
  --backgrounds-secondarybackground: rgb(35,32,32); /* @kind color */
  --border-accent: var(--neutral-925-alpha-12); /* @kind color */
  --border-alert: var(--alert-500); /* @kind color */
  --border-focus: var(--primary-500); /* @kind color */
  --border-primary: var(--neutral-925-alpha-12); /* @kind color */
  --border-radius-radius-full: var(--scale-4500);
  --border-radius-radius-none: var(--scale-0);
  --border-radius-radius-lg: var(--scale-500);
  --border-radius-radius-md: var(--scale-300);
  --border-radius-radius-sm: var(--scale-200);
  --border-radius-radius-xl: var(--scale-800);
  --border-radius-radius-xs: var(--scale-100);
  --border-secondary: var(--neutral-925); /* @kind color */
  --border-success: var(--success-500); /* @kind color */
  --border-warning: var(--warning-500); /* @kind color */
  --border-width-border-lg: var(--scale-75);
  --border-width-border-md: var(--scale-50);
  --border-width-border-none: var(--scale-0);
  --border-width-border-sm: var(--scale-37);
  --border-width-border-xs: var(--scale-25);
  --borders-border-light: var(--alpha-tints-cafe-black-12); /* @kind color */
  --c-green: rgb(53,255,146); /* @kind color */
  --cafe-blue-100: rgb(240,244,254); /* @kind color */
  --cafe-blue-300-2: rgb(160,216,255); /* @kind color */
  --cafe-blue-300: rgb(160,216,255); /* @kind color */
  --cafe-blue-500-2: rgb(37,99,235); /* @kind color */
  --cafe-blue-500: rgb(37,99,235); /* @kind color */
  --cafe-blue-700: rgb(36,75,162); /* @kind color */
  --cafe-cyan-300: rgb(169,255,255); /* @kind color */
  --cafe-cyan-500: rgb(0,184,184); /* @kind color */
  --cafe-green-300: rgb(203,255,218); /* @kind color */
  --cafe-green-500-2: rgb(53,255,146); /* @kind color */
  --cafe-green-500: rgb(53,255,146); /* @kind color */
  --cafe-green-700: rgb(37,100,66); /* @kind color */
  --cafe-grey-100-alpha-70: rgba(248,248,249,0.7); /* @kind color */
  --cafe-grey-200: rgb(241,241,247); /* @kind color */
  --cafe-grey-300: rgb(178,188,189); /* @kind color */
  --cafe-grey-50: rgb(252,252,252); /* @kind color */
  --cafe-grey-700: rgb(104,107,107); /* @kind color */
  --cafe-grey-75-alpha-12: rgba(248,248,249,0.12); /* @kind color */
  --cafe-grey-75-alpha-30: rgba(248,248,249,0.3); /* @kind color */
  --cafe-grey-75-alpha-70: rgba(248,248,249,0.7); /* @kind color */
  --cafe-grey-75: rgb(248,248,249); /* @kind color */
  --cafe-grey-900: rgb(46,43,43); /* @kind color */
  --cafe-grey-925-alpha-12: rgba(35,32,32,0.12); /* @kind color */
  --cafe-grey-925-alpha-30: rgba(35,32,32,0.3); /* @kind color */
  --cafe-grey-925-alpha-70: rgba(35,32,32,0.7); /* @kind color */
  --cafe-grey-925: rgb(35,32,32); /* @kind color */
  --cafe-grey-950: rgb(23,21,21); /* @kind color */
  --cafe-magenta-300: rgb(255,223,254); /* @kind color */
  --cafe-magenta-500: rgb(221,93,210); /* @kind color */
  --cafe-orange-300: rgb(255,232,175); /* @kind color */
  --cafe-orange-500: rgb(250,170,120); /* @kind color */
  --cafe-pink-300: rgb(255,219,230); /* @kind color */
  --cafe-pink-500: rgb(252,71,125); /* @kind color */
  --cafe-purple-300: rgb(232,214,255); /* @kind color */
  --cafe-purple-500-2: rgb(120,75,240); /* @kind color */
  --cafe-purple-500: rgb(120,75,240); /* @kind color */
  --cafe-red-300: rgb(253,193,243); /* @kind color */
  --cafe-red-500: rgb(250,85,49); /* @kind color */
  --cafe-type-font-family-caption: "Roboto Mono";
  --cafe-type-font-family-heading: "Satoshi Variable";
  --cafe-type-font-family-hero: "Satoshi Variable";
  --cafe-type-font-family-label: "Satoshi Variable";
  --cafe-type-font-family-p: "Satoshi Variable";
  --cafe-type-font-weight-black: 900; /* @kind other */
  --cafe-type-font-weight-bold: 700; /* @kind other */
  --cafe-type-font-weight-medium: 500; /* @kind other */
  --cafe-type-font-weight-regular: 400; /* @kind other */
  --cafe-type-font-weight-semibold: 600; /* @kind other */
  --cafe-yellow-300: rgb(254,250,216); /* @kind color */
  --cafe-yellow-500: rgb(255,239,93); /* @kind color */
  --callout-callout: rgb(55,51,255); /* @kind color */
  --callouts-callout-2: rgb(224,241,34); /* @kind color */
  --callouts-callout: rgb(53,255,146); /* @kind color */
  --callouts-secondarycallout: rgb(37,99,235); /* @kind color */
  --core-double-spacer: 16; /* @kind spacing */
  --core-gutter: 24; /* @kind spacing */
  --core-half-spacer: 4; /* @kind spacing */
  --core-spacer: 8; /* @kind spacing */
  --corner-radius-radius-m-2: 12; /* @kind radius */
  --corner-radius-radius-m: 12; /* @kind radius */
  --fill-btnfill: rgb(253,253,254); /* @kind color */
  --fill-quaternaryfill-2: rgb(225,228,234); /* @kind color */
  --fill-quaternaryfill: rgb(225,228,234); /* @kind color */
  --fill-quinaryfill: rgb(171,176,187); /* @kind color */
  --fill-secondaryfill-2: rgb(17,17,17); /* @kind color */
  --fill-secondaryfill-3: rgb(17,17,17); /* @kind color */
  --fill-secondaryfill-4: rgb(17,17,17); /* @kind color */
  --fill-secondaryfill: rgb(17,17,17); /* @kind color */
  --fills-fill-2: rgb(252,252,252); /* @kind color */
  --fills-fill-3: var(--tints-cafe-black); /* @kind color */
  --fills-fill-4: rgb(252,252,252); /* @kind color */
  --fills-fill-light: var(--tints-cafe-grey); /* @kind color */
  --fills-fill-subtle: var(--tints-cafe-white-subtle); /* @kind color */
  --fills-fill: rgb(252,252,252); /* @kind color */
  --fills-quaternaryfill-2: rgb(241,241,247); /* @kind color */
  --fills-quaternaryfill-3: rgb(241,241,247); /* @kind color */
  --fills-quaternaryfill: rgb(248,248,249); /* @kind color */
  --fills-secondaryfill-2: rgb(35,32,32); /* @kind color */
  --fills-secondaryfill-3: rgb(35,32,32); /* @kind color */
  --fills-secondaryfill: rgb(35,32,32); /* @kind color */
  --fills-tertiaryfill-2: rgb(100,113,121); /* @kind color */
  --fills-tertiaryfill: rgb(100,113,121); /* @kind color */
  --font-size-caption: var(--scale-300);
  --font-size-hero: var(--scale-4500);
  --font-size-headings-h1: var(--scale-850);
  --font-size-headings-h2: var(--scale-550);
  --font-size-headings-h3: var(--scale-500);
  --font-size-headings-h4: var(--scale-450);
  --font-size-headings-h5: var(--scale-450);
  --font-size-headings-h6: var(--scale-400);
  --font-size-label: var(--scale-300);
  --font-size-p: var(--scale-350);
  --graphic-accent-primary: var(--secondary-500); /* @kind color */
  --graphic-accent-quaternary: var(--primary-500); /* @kind color */
  --graphic-accent-quinary: var(--quinary-500); /* @kind color */
  --graphic-accent-secondary: var(--tertiary-500); /* @kind color */
  --graphic-accent-septenary: var(--septenary-500); /* @kind color */
  --graphic-accent-tertiary: var(--quaternary-500); /* @kind color */
  --graphic-action-hover: var(--secondary-500); /* @kind color */
  --graphic-alert: var(--alert-500); /* @kind color */
  --graphic-on-action-primary: var(--neutral-925); /* @kind color */
  --graphic-on-action-secondary: var(--neutral-925); /* @kind color */
  --graphic-primary: var(--neutral-925); /* @kind color */
  --graphic-secondary: var(--neutral-300); /* @kind color */
  --graphic-success: var(--success-500); /* @kind color */
  --graphic-tertiery: var(--neutral-50); /* @kind color */
  --label-actionlabel: rgb(55,51,255); /* @kind color */
  --label-label: rgb(17,17,17); /* @kind color */
  --labels-btnlable-2: rgb(252,252,252); /* @kind color */
  --labels-btnlable: rgb(252,252,252); /* @kind color */
  --labels-inversebtnlabel: rgb(35,32,32); /* @kind color */
  --labels-label-2: rgb(35,32,32); /* @kind color */
  --labels-label-3: rgb(35,32,32); /* @kind color */
  --labels-label: rgb(35,32,32); /* @kind color */
  --labels-quaternarylabel-2: rgb(100,113,121); /* @kind color */
  --labels-quaternarylabel: rgb(100,113,121); /* @kind color */
  --labels-secondarylabel-2: rgb(252,252,252); /* @kind color */
  --labels-secondarylabel: rgb(252,252,252); /* @kind color */
  --labels-tertiarylabel-2: rgb(178,188,189); /* @kind color */
  --labels-tertiarylabel: rgb(178,188,189); /* @kind color */
  --line-height-caption: var(--scale-400);
  --line-height-hero: var(--scale-4500);
  --line-height-headings-h1: var(--scale-950);
  --line-height-headings-h2: var(--scale-800);
  --line-height-headings-h3: var(--scale-600);
  --line-height-headings-h4: var(--scale-500);
  --line-height-headings-h5: var(--scale-600);
  --line-height-headings-h6: var(--scale-500);
  --line-height-label: var(--scale-400);
  --line-height-p: var(--scale-500);
  --margins-spacing-double-spacer-2: 16; /* @kind spacing */
  --margins-spacing-double-spacer-3: 16; /* @kind spacing */
  --margins-spacing-double-spacer: 16; /* @kind spacing */
  --margins-spacing-gutter: 24; /* @kind spacing */
  --margins-spacing-half-spacer-2: 4; /* @kind spacing */
  --margins-spacing-half-spacer: 4; /* @kind spacing */
  --margins-spacing-medium-margin: 32; /* @kind spacing */
  --margins-spacing-spacer-2: 8; /* @kind spacing */
  --margins-spacing-spacer-3: 8; /* @kind spacing */
  --margins-spacing-spacer: 8; /* @kind spacing */
  --neutral-100-alpha-12: var(--alpha-tints-cafe-white-12); /* @kind color */
  --neutral-100-alpha-30: var(--cafe-grey-75-alpha-30); /* @kind color */
  --neutral-100-alpha-70: var(--cafe-grey-75-alpha-70); /* @kind color */
  --neutral-200: var(--tints-cafe-white-subtle); /* @kind color */
  --neutral-300: var(--tints-cafe-grey); /* @kind color */
  --neutral-50: var(--tints-cafe-white-bright); /* @kind color */
  --neutral-700: var(--tints-cafe-grey-dark); /* @kind color */
  --neutral-75: var(--tints-cafe-white); /* @kind color */
  --neutral-900: var(--tints-cafe-black-subtle); /* @kind color */
  --neutral-925-alpha-12: var(--alpha-tints-cafe-black-12); /* @kind color */
  --neutral-925-alpha-30: var(--cafe-grey-925-alpha-30); /* @kind color */
  --neutral-925-alpha-70: var(--cafe-grey-925-alpha-70); /* @kind color */
  --neutral-925: var(--tints-cafe-black); /* @kind color */
  --neutral-950: var(--tints-cafe-black-bright); /* @kind color */
  --octonary-300: var(--cafe-orange-300); /* @kind color */
  --octonary-500: var(--alts-cafe-orange); /* @kind color */
  --paragraph-spacing-caption: var(--scale-400);
  --paragraph-spacing-headings-h3: var(--scale-1200);
  --paragraph-spacing-headings-h4: var(--scale-850);
  --paragraph-spacing-headings-h5: var(--scale-850);
  --paragraph-spacing-headings-h6: var(--scale-800);
  --paragraph-spacing-label: var(--scale-400);
  --paragraph-spacing-p: var(--scale-600);
  --primary-300: var(--primes-cafe-green-pastel); /* @kind color */
  --primary-500: var(--primes-cafe-green); /* @kind color */
  --primary-700: var(--cafe-green-700); /* @kind color */
  --primary-blue-2: rgb(37,99,235); /* @kind color */
  --primary-blue: rgb(37,99,235); /* @kind color */
  --primary-cyan-tech-entertainment: rgb(0,183,183); /* @kind color */
  --primary-green-2: rgb(53,255,146); /* @kind color */
  --primary-green: rgb(53,255,146); /* @kind color */
  --primary-magenta-health-beauty: rgb(221,93,210); /* @kind color */
  --primary-orange-food-bev: rgb(252,147,71); /* @kind color */
  --primary-pink-business-leisure: rgb(252,71,125); /* @kind color */
  --primary-purple-fashion-apparel-2: rgb(120,75,240); /* @kind color */
  --primary-purple-fashion-apparel: rgb(120,75,240); /* @kind color */
  --primary-yellow: rgb(255,239,93); /* @kind color */
  --primes-cafe-blue-pastel: rgb(160,216,255); /* @kind color */
  --primes-cafe-blue: rgb(37,99,235); /* @kind color */
  --primes-cafe-green-pastel: rgb(203,255,218); /* @kind color */
  --primes-cafe-green: rgb(53,255,146); /* @kind color */
  --quaternary-300: var(--alts-cafe-pink-pastel); /* @kind color */
  --quaternary-500: var(--alts-cafe-pink); /* @kind color */
  --quinary-300: var(--alts-cafe-cyan-pastel); /* @kind color */
  --quinary-500: var(--alts-cafe-cyan); /* @kind color */
  --scale-0: 0; /* @kind spacing */
  --scale-100: 4; /* @kind spacing */
  --scale-1200: 48; /* @kind spacing */
  --scale-150: 6; /* @kind spacing */
  --scale-200: 8; /* @kind spacing */
  --scale-250: 10; /* @kind spacing */
  --scale-25: 1; /* @kind spacing */
  --scale-300: 12; /* @kind spacing */
  --scale-350: 14; /* @kind spacing */
  --scale-37: 1.5; /* @kind spacing */
  --scale-400: 16; /* @kind spacing */
  --scale-4500: 180; /* @kind spacing */
  --scale-450: 18; /* @kind spacing */
  --scale-500: 20; /* @kind spacing */
  --scale-50: 2; /* @kind spacing */
  --scale-75: 3; /* @kind spacing */
  --scale-1600: 64; /* @kind spacing */
  --scale-2400: 96; /* @kind spacing */
  --scale-550: 22; /* @kind spacing */
  --scale-600: 24; /* @kind spacing */
  --scale-800: 32; /* @kind spacing */
  --scale-850: 34; /* @kind spacing */
  --scale-950: 38; /* @kind spacing */
  --secondary-100: var(--cafe-blue-100); /* @kind color */
  --secondary-300: var(--primes-cafe-blue-pastel); /* @kind color */
  --secondary-500: var(--primes-cafe-blue); /* @kind color */
  --secondary-700: var(--cafe-blue-700); /* @kind color */
  --secondary-blue-pastel: rgb(160,216,255); /* @kind color */
  --secondary-blue-subtle: rgb(240,244,254); /* @kind color */
  --secondary-cyan-tech-entertainment-pastel: rgb(167,255,244); /* @kind color */
  --secondary-green-pastel: rgb(203,255,218); /* @kind color */
  --secondary-green-subtle: rgb(240,255,246); /* @kind color */
  --secondary-magenta-health-beauty-pastel: rgb(255,223,254); /* @kind color */
  --secondary-orange-food-bev-pastel: rgb(255,232,175); /* @kind color */
  --secondary-pink-business-leisure-pastel: rgb(255,219,230); /* @kind color */
  --secondary-purple-fashion-apparel-pastel-2: rgb(232,214,255); /* @kind color */
  --secondary-purple-fashion-apparel-pastel: rgb(232,214,255); /* @kind color */
  --secondary-yellow-pastel: rgb(254,250,216); /* @kind color */
  --separator-calloutseparator: rgba(55,51,255,0.05); /* @kind color */
  --separator-separator-2: rgba(0,0,0,0.05); /* @kind color */
  --separator-separator: rgba(0,0,0,0.05); /* @kind color */
  --separators-inverseseparator-2: rgba(252,252,252,0.15); /* @kind color */
  --separators-inverseseparator: rgba(252,252,252,0.15); /* @kind color */
  --separators-separator-2: rgba(35,32,32,0.05); /* @kind color */
  --separators-separator-3: rgba(35,32,32,0.05); /* @kind color */
  --separators-separator: rgba(35,32,32,0.05); /* @kind color */
  --septenary-300: var(--cafe-magenta-300); /* @kind color */
  --septenary-500: var(--alts-cafe-magenta); /* @kind color */
  --spacing-space-2xl: var(--scale-500);
  --spacing-space-3xl: var(--scale-600);
  --spacing-space-4xl: var(--scale-800);
  --spacing-space-5xl: var(--scale-1200);
  --spacing-space-lg: var(--scale-300);
  --spacing-space-md: var(--scale-250);
  --spacing-space-sm: var(--scale-200);
  --spacing-space-xl: var(--scale-400);
  --spacing-space-xs: var(--scale-150);
  --spacing-space-xxs: var(--scale-100);
  --success-500: var(--primes-cafe-green); /* @kind color */
  --success-700: var(--cafe-green-700); /* @kind color */
  --surface-accent-primary: var(--secondary-300); /* @kind color */
  --surface-accent-quaternary: var(--primary-300); /* @kind color */
  --surface-accent-secondary: var(--tertiary-300); /* @kind color */
  --surface-accent-tertiary: var(--quaternary-300); /* @kind color */
  --surface-action-disabled: var(--neutral-200); /* @kind color */
  --surface-action-primary: var(--primary-500); /* @kind color */
  --surface-action-secondary: var(--neutral-50); /* @kind color */
  --surface-action-tertiary: var(--secondary-500); /* @kind color */
  --surface-page: var(--neutral-75); /* @kind color */
  --surface-primary: var(--neutral-50); /* @kind color */
  --surface-secondary: var(--neutral-200); /* @kind color */
  --surface-tertiery: var(--cafe-grey-75-alpha-70); /* @kind color */
  --tertiary-300: var(--alts-cafe-purple-pastel); /* @kind color */
  --tertiary-500: var(--alts-cafe-purple); /* @kind color */
  --text-accent-primary: var(--secondary-500); /* @kind color */
  --text-accent-quaternary: var(--primary-500); /* @kind color */
  --text-accent-secondary: var(--tertiary-500); /* @kind color */
  --text-accent-septenary: var(--septenary-500); /* @kind color */
  --text-action-hover: var(--secondary-500); /* @kind color */
  --text-action: var(--neutral-700); /* @kind color */
  --text-alert: var(--alert-500); /* @kind color */
  --text-disabled: var(--neutral-925-alpha-30); /* @kind color */
  --text-on-action-primary: var(--neutral-925); /* @kind color */
  --text-on-action-secondary: var(--neutral-925); /* @kind color */
  --text-on-action-tertiery: var(--neutral-50); /* @kind color */
  --text-on-disabled-primary: var(--neutral-300); /* @kind color */
  --text-primary: var(--neutral-925); /* @kind color */
  --text-quaternary: var(--neutral-50); /* @kind color */
  --text-secondary: var(--neutral-700); /* @kind color */
  --text-secondaryplaceholdertext: rgb(171,176,187); /* @kind color */
  --text-success: var(--success-500); /* @kind color */
  --text-tertiery: var(--neutral-300); /* @kind color */
  --tints-cafe-black-bright: rgb(23,21,21); /* @kind color */
  --tints-cafe-black-subtle: rgb(46,43,43); /* @kind color */
  --tints-cafe-black: rgb(35,32,32); /* @kind color */
  --tints-cafe-grey-dark: rgb(104,107,107); /* @kind color */
  --tints-cafe-grey: rgb(178,188,189); /* @kind color */
  --tints-cafe-white-bright: rgb(252,252,252); /* @kind color */
  --tints-cafe-white-subtle: rgb(241,241,247); /* @kind color */
  --tints-cafe-white: rgb(248,248,249); /* @kind color */
  --transparencies-12tertiaryfill: rgba(100,113,121,0.12); /* @kind color */
  --transparencies-80background-2: rgba(248,248,249,0.8); /* @kind color */
  --transparencies-80background: rgba(248,248,249,0.8); /* @kind color */
  --transparency-30senaryfill: rgba(100,106,121,0.3); /* @kind color */
  --warning-300: var(--alts-cafe-yellow-pastel); /* @kind color */
  --warning-500: var(--cafe-yellow-500); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --alert-alert: rgb(254,101,92); /* @kind color */
  --alerts-alert-2: rgb(250,85,49); /* @kind color */
  --alerts-alert: rgb(250,85,49); /* @kind color */
  --always-black: var(--neutral-950); /* @kind color */
  --always-white-2: var(--neutral-50); /* @kind color */
  --always-white: var(--tints-cafe-white); /* @kind color */
  --background-background: rgb(17,17,17); /* @kind color */
  --backgrounds-background-2: rgb(35,32,32); /* @kind color */
  --backgrounds-bg-light: var(--tints-cafe-black-bright); /* @kind color */
  --backgrounds-secondarybackground-2: rgb(248,248,249); /* @kind color */
  --border-accent: var(--neutral-925-alpha-12); /* @kind color */
  --border-alert: var(--alert-500); /* @kind color */
  --border-focus: var(--primary-500); /* @kind color */
  --border-primary: var(--neutral-100-alpha-12); /* @kind color */
  --border-secondary: var(--neutral-75); /* @kind color */
  --border-success: var(--success-500); /* @kind color */
  --border-warning: var(--warning-500); /* @kind color */
  --borders-border-light: var(--alpha-tints-cafe-white-12); /* @kind color */
  --callout-callout: rgb(55,51,255); /* @kind color */
  --callouts-callout-2: rgb(224,241,34); /* @kind color */
  --fill-btnfill: rgb(253,253,254); /* @kind color */
  --fill-quaternaryfill-2: rgb(51,54,62); /* @kind color */
  --fill-quaternaryfill: rgb(51,54,62); /* @kind color */
  --fill-quinaryfill: rgb(125,132,149); /* @kind color */
  --fill-secondaryfill-2: rgb(253,253,254); /* @kind color */
  --fill-secondaryfill-3: rgb(253,253,254); /* @kind color */
  --fill-secondaryfill-4: rgb(253,253,254); /* @kind color */
  --fill-secondaryfill: rgb(253,253,254); /* @kind color */
  --fills-fill-2: rgb(35,32,32); /* @kind color */
  --fills-fill-3: var(--tints-cafe-white); /* @kind color */
  --fills-fill-4: rgb(35,32,32); /* @kind color */
  --fills-fill-light: var(--tints-cafe-grey-dark); /* @kind color */
  --fills-fill-subtle: var(--tints-cafe-black-subtle); /* @kind color */
  --fills-quaternaryfill-2: rgb(40,43,43); /* @kind color */
  --fills-quaternaryfill-3: rgb(40,43,43); /* @kind color */
  --fills-secondaryfill-2: rgb(252,252,252); /* @kind color */
  --fills-secondaryfill-3: rgb(252,252,252); /* @kind color */
  --fills-tertiaryfill-2: rgb(178,188,189); /* @kind color */
  --fills-tertiaryfill: rgb(178,188,189); /* @kind color */
  --graphic-accent-primary: var(--secondary-500); /* @kind color */
  --graphic-accent-quaternary: var(--primary-500); /* @kind color */
  --graphic-accent-quinary: var(--quinary-500); /* @kind color */
  --graphic-accent-secondary: var(--tertiary-500); /* @kind color */
  --graphic-accent-septenary: var(--septenary-500); /* @kind color */
  --graphic-accent-tertiary: var(--quaternary-500); /* @kind color */
  --graphic-action-hover: var(--primary-500); /* @kind color */
  --graphic-alert: var(--alert-500); /* @kind color */
  --graphic-on-action-primary: var(--neutral-925); /* @kind color */
  --graphic-on-action-secondary: var(--neutral-75); /* @kind color */
  --graphic-primary: var(--neutral-75); /* @kind color */
  --graphic-secondary: var(--neutral-700); /* @kind color */
  --graphic-success: var(--success-500); /* @kind color */
  --graphic-tertiery: var(--neutral-950); /* @kind color */
  --label-actionlabel: rgb(101,135,255); /* @kind color */
  --label-label: rgb(253,253,254); /* @kind color */
  --labels-btnlable-2: rgb(252,252,252); /* @kind color */
  --labels-btnlable: rgb(252,252,252); /* @kind color */
  --labels-inversebtnlabel: rgb(35,32,32); /* @kind color */
  --labels-label-2: rgb(252,252,252); /* @kind color */
  --labels-label-3: rgb(252,252,252); /* @kind color */
  --labels-quaternarylabel-2: rgb(178,188,189); /* @kind color */
  --labels-quaternarylabel: rgb(178,188,189); /* @kind color */
  --labels-secondarylabel-2: rgb(35,32,32); /* @kind color */
  --labels-tertiarylabel-2: rgb(100,113,121); /* @kind color */
  --primary-blue-2: rgb(37,99,235); /* @kind color */
  --primary-blue: rgb(37,99,235); /* @kind color */
  --primary-cyan-tech-entertainment: rgb(0,183,183); /* @kind color */
  --primary-green-2: rgb(53,255,146); /* @kind color */
  --primary-green: rgb(53,255,146); /* @kind color */
  --primary-magenta-health-beauty: rgb(221,93,210); /* @kind color */
  --primary-orange-food-bev: rgb(252,147,71); /* @kind color */
  --primary-pink-business-leisure: rgb(252,71,125); /* @kind color */
  --primary-purple-fashion-apparel-2: rgb(120,75,240); /* @kind color */
  --primary-purple-fashion-apparel: rgb(120,75,240); /* @kind color */
  --primary-yellow: rgb(255,239,93); /* @kind color */
  --secondary-blue-pastel: rgb(160,216,255); /* @kind color */
  --secondary-blue-subtle: rgb(240,244,254); /* @kind color */
  --secondary-cyan-tech-entertainment-pastel: rgb(167,255,244); /* @kind color */
  --secondary-green-pastel: rgb(203,255,218); /* @kind color */
  --secondary-green-subtle: rgb(240,255,246); /* @kind color */
  --secondary-magenta-health-beauty-pastel: rgb(255,223,254); /* @kind color */
  --secondary-orange-food-bev-pastel: rgb(255,232,175); /* @kind color */
  --secondary-pink-business-leisure-pastel: rgb(255,219,230); /* @kind color */
  --secondary-purple-fashion-apparel-pastel-2: rgb(232,214,255); /* @kind color */
  --secondary-purple-fashion-apparel-pastel: rgb(232,214,255); /* @kind color */
  --secondary-yellow-pastel: rgb(254,250,216); /* @kind color */
  --separator-calloutseparator: rgba(55,51,255,0.3); /* @kind color */
  --separator-separator-2: rgba(253,253,254,0.1); /* @kind color */
  --separator-separator: rgba(253,253,254,0.1); /* @kind color */
  --separators-inverseseparator-2: rgba(35,32,32,0.05); /* @kind color */
  --separators-separator-2: rgba(252,252,252,0.15); /* @kind color */
  --separators-separator-3: rgba(252,252,252,0.15); /* @kind color */
  --surface-accent-primary: var(--secondary-300); /* @kind color */
  --surface-accent-quaternary: var(--primary-300); /* @kind color */
  --surface-accent-secondary: var(--tertiary-300); /* @kind color */
  --surface-accent-tertiary: var(--quaternary-300); /* @kind color */
  --surface-action-disabled: var(--neutral-900); /* @kind color */
  --surface-action-primary: var(--primary-500); /* @kind color */
  --surface-action-secondary: var(--neutral-950); /* @kind color */
  --surface-action-tertiary: var(--secondary-500); /* @kind color */
  --surface-page: var(--neutral-925); /* @kind color */
  --surface-primary: var(--neutral-950); /* @kind color */
  --surface-secondary: var(--neutral-900); /* @kind color */
  --surface-tertiery: var(--neutral-925-alpha-70); /* @kind color */
  --text-accent-primary: var(--secondary-500); /* @kind color */
  --text-accent-quaternary: var(--primary-500); /* @kind color */
  --text-accent-secondary: var(--tertiary-500); /* @kind color */
  --text-accent-septenary: var(--septenary-500); /* @kind color */
  --text-action-hover: var(--primary-500); /* @kind color */
  --text-action: var(--neutral-300); /* @kind color */
  --text-alert: var(--alert-300); /* @kind color */
  --text-disabled: var(--neutral-100-alpha-30); /* @kind color */
  --text-on-action-primary: var(--neutral-925); /* @kind color */
  --text-on-action-secondary: var(--neutral-75); /* @kind color */
  --text-on-action-tertiery: var(--neutral-50); /* @kind color */
  --text-on-disabled-primary: var(--neutral-700); /* @kind color */
  --text-primary: var(--neutral-75); /* @kind color */
  --text-quaternary: var(--neutral-950); /* @kind color */
  --text-secondary: var(--neutral-300); /* @kind color */
  --text-secondaryplaceholdertext: rgb(171,176,187); /* @kind color */
  --text-success: var(--success-500); /* @kind color */
  --text-tertiery: var(--neutral-700); /* @kind color */
  --transparencies-12tertiaryfill: rgba(178,188,189,0.12); /* @kind color */
  --transparencies-80background-2: rgba(35,32,32,0.8); /* @kind color */
  --transparencies-80background: rgba(35,32,32,0.8); /* @kind color */
  --transparency-30senaryfill: rgba(100,106,121,0.3); /* @kind color */
}

:root[data-mode="mobile"] {
  --border-radius-radius-full: var(--scale-4500);
  --border-radius-radius-none: var(--scale-0);
  --border-radius-radius-lg: var(--scale-500);
  --border-radius-radius-md: var(--scale-300);
  --border-radius-radius-sm: var(--scale-200);
  --border-radius-radius-xl: var(--scale-800);
  --border-radius-radius-xs: var(--scale-100);
  --border-width-border-lg: var(--scale-75);
  --border-width-border-md: var(--scale-50);
  --border-width-border-none: var(--scale-0);
  --border-width-border-sm: var(--scale-37);
  --border-width-border-xs: var(--scale-25);
  --font-size-caption: var(--scale-300);
  --font-size-hero: var(--scale-4500);
  --font-size-headings-h1: var(--scale-850);
  --font-size-headings-h2: var(--scale-550);
  --font-size-headings-h3: var(--scale-500);
  --font-size-headings-h4: var(--scale-450);
  --font-size-headings-h5: var(--scale-450);
  --font-size-headings-h6: var(--scale-400);
  --font-size-label: var(--scale-300);
  --font-size-p: var(--scale-350);
  --line-height-caption: var(--scale-400);
  --line-height-hero: var(--scale-4500);
  --line-height-headings-h1: var(--scale-950);
  --line-height-headings-h2: var(--scale-800);
  --line-height-headings-h3: var(--scale-600);
  --line-height-headings-h4: var(--scale-500);
  --line-height-headings-h5: var(--scale-600);
  --line-height-headings-h6: var(--scale-350);
  --line-height-label: var(--scale-400);
  --line-height-p: var(--scale-500);
  --paragraph-spacing-caption: var(--scale-400);
  --paragraph-spacing-headings-h3: var(--scale-1200);
  --paragraph-spacing-headings-h4: var(--scale-850);
  --paragraph-spacing-headings-h5: var(--scale-850);
  --paragraph-spacing-headings-h6: var(--scale-800);
  --paragraph-spacing-label: var(--scale-400);
  --paragraph-spacing-p: var(--scale-600);
  --spacing-space-2xl: var(--scale-500);
  --spacing-space-3xl: var(--scale-600);
  --spacing-space-4xl: var(--scale-800);
  --spacing-space-5xl: var(--scale-1200);
  --spacing-space-lg: var(--scale-300);
  --spacing-space-md: var(--scale-250);
  --spacing-space-sm: var(--scale-200);
  --spacing-space-xl: var(--scale-400);
  --spacing-space-xs: var(--scale-150);
  --spacing-space-xxs: var(--scale-100);
}