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

:root {
  --alpha-cream-12: rgba(236,234,209,0.12); /* @kind color */
  --alpha-cream-32: rgba(236,234,209,0.32); /* @kind color */
  --alpha-cream-72: rgba(236,234,209,0.72); /* @kind color */
  --alpha-mint-12: rgba(109,255,138,0.12); /* @kind color */
  --alpha-mint-32: rgba(109,255,138,0.32); /* @kind color */
  --alpha-mint-80: rgba(109,255,138,0.8); /* @kind color */
  --alpha-negative-red-24: rgba(255,107,107,0.24); /* @kind color */
  --alpha-negative-red-80: rgba(255,107,107,0.8); /* @kind color */
  --alpha-negative-red-8: rgba(255,107,107,0.08); /* @kind color */
  --alpha-soft-black-24: rgba(16,17,14,0.24); /* @kind color */
  --alpha-soft-black-40: rgba(16,17,14,0.4); /* @kind color */
  --alpha-soft-black-72: rgba(16,17,14,0.72); /* @kind color */
  --alpha-soft-black-8: rgba(16,17,14,0.08); /* @kind color */
  --alpha-white-16: rgba(255,255,255,0.16); /* @kind color */
  --alpha-white-32: rgba(255,255,255,0.32); /* @kind color */
  --alpha-white-60: rgba(255,255,255,0.6); /* @kind color */
  --alpha-white-88: rgba(255,255,255,0.88); /* @kind color */
  --alpha-white-8: rgba(255,255,255,0.08); /* @kind color */
  --bg-surface-neutral-grey-primary-bg: var(--neutral-050-2); /* @kind color */
  --black-ladder-carbon-olive: rgb(21,23,15); /* @kind color */
  --black-ladder-product-black: rgb(41,44,50); /* @kind color */
  --black-ladder-soft-black: rgb(16,17,14); /* @kind color */
  --carbon-neutral-900: var(--neutral-900); /* @kind color */
  --desktop-body-default-bold-font-family: "eToro Variable";
  --desktop-body-default-bold-font-size: 18;
  --desktop-body-default-bold-font-weight: "Semibold";
  --desktop-body-default-bold-letter-spacing: 0;
  --desktop-body-default-bold-line-height: 24;
  --desktop-body-default-font-family: "eToro Variable";
  --desktop-body-default-font-size: 18;
  --desktop-body-default-font-weight: "Regular";
  --desktop-body-default-letter-spacing: 0;
  --desktop-body-default-line-height: 24;
  --desktop-body-large-bold-font-family: "eToro Variable";
  --desktop-body-large-bold-font-size: 20;
  --desktop-body-large-bold-font-weight: "Semibold";
  --desktop-body-large-bold-letter-spacing: 0;
  --desktop-body-large-bold-line-height: 27;
  --desktop-body-large-font-family: "eToro Variable";
  --desktop-body-large-font-size: 20;
  --desktop-body-large-font-weight: "Regular";
  --desktop-body-large-letter-spacing: 0;
  --desktop-body-large-line-height: 27;
  --desktop-body-small-bold-font-family: "eToro Variable";
  --desktop-body-small-bold-font-size: 16;
  --desktop-body-small-bold-font-weight: "Semibold";
  --desktop-body-small-bold-letter-spacing: 0;
  --desktop-body-small-bold-line-height: 22;
  --desktop-body-small-font-family: "eToro Variable";
  --desktop-body-small-font-size: 16;
  --desktop-body-small-font-weight: "Regular";
  --desktop-body-small-letter-spacing: 0;
  --desktop-body-small-line-height: 22;
  --desktop-body-x-small-bold-font-family: "eToro Variable";
  --desktop-body-x-small-bold-font-size: 14;
  --desktop-body-x-small-bold-font-weight: "Semibold";
  --desktop-body-x-small-bold-letter-spacing: 0;
  --desktop-body-x-small-bold-line-height: 19;
  --desktop-body-x-small-font-family: "eToro Variable";
  --desktop-body-x-small-font-size: 14;
  --desktop-body-x-small-font-weight: "Regular";
  --desktop-body-x-small-letter-spacing: 0;
  --desktop-body-x-small-line-height: 19;
  --desktop-headings-01-font-family: "eToro Variable";
  --desktop-headings-01-font-size: 72;
  --desktop-headings-01-font-weight: "Extrabold";
  --desktop-headings-01-letter-spacing: -2;
  --desktop-headings-01-line-height: 72;
  --desktop-headings-02-font-family: "eToro Variable";
  --desktop-headings-02-font-size: 32;
  --desktop-headings-02-font-weight: "Semibold";
  --desktop-headings-02-letter-spacing: 0;
  --desktop-headings-02-line-height: 35;
  --desktop-headings-03-font-family: "eToro Variable";
  --desktop-headings-03-font-size: 28;
  --desktop-headings-03-font-weight: "Medium";
  --desktop-headings-03-letter-spacing: -0.5;
  --desktop-headings-03-line-height: 31;
  --desktop-headings-cards-font-family: "eToro Variable";
  --desktop-headings-cards-font-size: 24;
  --desktop-headings-cards-font-weight: "Semibold";
  --desktop-headings-cards-letter-spacing: -0.5;
  --desktop-headings-cards-line-height: 26;
  --desktop-headings-display-font-family: "eToro Variable";
  --desktop-headings-display-font-size: 56;
  --desktop-headings-display-font-weight: "Extrabold";
  --desktop-headings-display-letter-spacing: -2;
  --desktop-headings-display-line-height: 56;
  --desktop-headings-subtitle-font-family: "eToro Variable";
  --desktop-headings-subtitle-font-size: 22;
  --desktop-headings-subtitle-font-weight: "Medium";
  --desktop-headings-subtitle-letter-spacing: 0;
  --desktop-headings-subtitle-line-height: 26;
  --desktop-ui-button-font-family: "eToro Variable";
  --desktop-ui-button-font-size: 18;
  --desktop-ui-button-font-weight: "Medium";
  --desktop-ui-button-letter-spacing: 0;
  --desktop-ui-button-line-height: 18;
  --desktop-ui-overline-font-family: "eToro Variable";
  --desktop-ui-overline-font-size: 12;
  --desktop-ui-overline-font-weight: "Medium";
  --desktop-ui-overline-letter-spacing: 2;
  --desktop-ui-overline-line-height: 12;
  --mobile-body-default-bold-font-family: "eToro Variable";
  --mobile-body-default-bold-font-size: 16;
  --mobile-body-default-bold-font-weight: "Semibold";
  --mobile-body-default-bold-letter-spacing: 0;
  --mobile-body-default-bold-line-height: 22;
  --mobile-body-default-font-family: "eToro Variable";
  --mobile-body-default-font-size: 16;
  --mobile-body-default-font-weight: "Regular";
  --mobile-body-default-letter-spacing: 0;
  --mobile-body-default-line-height: 22;
  --mobile-body-large-bold-font-family: "eToro Variable";
  --mobile-body-large-bold-font-size: 18;
  --mobile-body-large-bold-font-weight: "Semibold";
  --mobile-body-large-bold-letter-spacing: 0;
  --mobile-body-large-bold-line-height: 24;
  --mobile-body-large-font-family: "eToro Variable";
  --mobile-body-large-font-size: 18;
  --mobile-body-large-font-weight: "Regular";
  --mobile-body-large-letter-spacing: 0;
  --mobile-body-large-line-height: 24;
  --mobile-body-small-bold-font-family: "eToro Variable";
  --mobile-body-small-bold-font-size: 14;
  --mobile-body-small-bold-font-weight: "Semibold";
  --mobile-body-small-bold-letter-spacing: 0;
  --mobile-body-small-bold-line-height: 19;
  --mobile-body-small-font-family: "eToro Variable";
  --mobile-body-small-font-size: 14;
  --mobile-body-small-font-weight: "Regular";
  --mobile-body-small-letter-spacing: 0;
  --mobile-body-small-line-height: 19;
  --mobile-body-x-small-bold-font-family: "eToro Variable";
  --mobile-body-x-small-bold-font-size: 12;
  --mobile-body-x-small-bold-font-weight: "Semibold";
  --mobile-body-x-small-bold-letter-spacing: 0;
  --mobile-body-x-small-bold-line-height: 16;
  --mobile-body-x-small-font-family: "eToro Variable";
  --mobile-body-x-small-font-size: 12;
  --mobile-body-x-small-font-weight: "Regular";
  --mobile-body-x-small-letter-spacing: 0;
  --mobile-body-x-small-line-height: 16;
  --mobile-headings-01-font-family: "eToro Variable";
  --mobile-headings-01-font-size: 40;
  --mobile-headings-01-font-weight: "Extrabold";
  --mobile-headings-01-letter-spacing: -1;
  --mobile-headings-01-line-height: 40;
  --mobile-headings-02-font-family: "eToro Variable";
  --mobile-headings-02-font-size: 26;
  --mobile-headings-02-font-weight: "Semibold";
  --mobile-headings-02-letter-spacing: -0.5;
  --mobile-headings-02-line-height: 29;
  --mobile-headings-03-font-family: "eToro Variable";
  --mobile-headings-03-font-size: 24;
  --mobile-headings-03-font-weight: "Medium";
  --mobile-headings-03-letter-spacing: -0.5;
  --mobile-headings-03-line-height: 26;
  --mobile-headings-cards-font-family: "eToro Variable";
  --mobile-headings-cards-font-size: 22;
  --mobile-headings-cards-font-weight: "Semibold";
  --mobile-headings-cards-letter-spacing: -0.5;
  --mobile-headings-cards-line-height: 24;
  --mobile-headings-display-font-family: "eToro Variable";
  --mobile-headings-display-font-size: 48;
  --mobile-headings-display-font-weight: "Extrabold";
  --mobile-headings-display-letter-spacing: -2;
  --mobile-headings-display-line-height: 48;
  --mobile-headings-subtitle-font-family: "eToro Variable";
  --mobile-headings-subtitle-font-size: 16;
  --mobile-headings-subtitle-font-weight: "Medium";
  --mobile-headings-subtitle-letter-spacing: 0;
  --mobile-headings-subtitle-line-height: 19;
  --mobile-ui-button-font-family: "eToro Variable";
  --mobile-ui-button-font-size: 16;
  --mobile-ui-button-font-weight: "Medium";
  --mobile-ui-button-letter-spacing: 0;
  --mobile-ui-button-line-height: 16;
  --mobile-ui-overline-font-family: "eToro Variable";
  --mobile-ui-overline-font-size: 10;
  --mobile-ui-overline-font-weight: "Medium";
  --mobile-ui-overline-letter-spacing: 2;
  --mobile-ui-overline-line-height: 10;
  --neutral-050-2: rgb(242,242,242); /* @kind color */
  --neutral-050: rgb(255,255,255); /* @kind color */
  --neutral-1000: rgb(11,13,16); /* @kind color */
  --neutral-800: rgb(36,38,40); /* @kind color */
  --neutral-900: rgb(27,30,33); /* @kind color */
  --neutrals-white-alpha-100: rgb(255,255,255); /* @kind color */
  --primary-cream: rgb(236,234,209); /* @kind color */
  --primary-dark-2: rgb(11,13,16); /* @kind color */
  --primary-dark: rgb(11,13,16); /* @kind color */
  --primary-forest: rgb(7,84,52); /* @kind color */
  --primary-mint-2: rgb(109,255,138); /* @kind color */
  --primary-mint: rgb(109,255,138); /* @kind color */
  --primary-product-green: rgb(19,198,54); /* @kind color */
  --radius-large: 16;
  --radius-max: 100;
  --radius-medium: 12;
  --radius-small: 8;
  --radius-x-large: 20;
  --secondary-sage-100: rgb(232,238,232); /* @kind color */
  --secondary-sage-200: rgb(208,217,208); /* @kind color */
  --secondary-sage-300-2: rgb(155,168,155); /* @kind color */
  --secondary-sage-300: rgb(155,168,155); /* @kind color */
  --secondary-sage-400: rgb(120,133,120); /* @kind color */
  --secondary-sage-500: rgb(86,99,86); /* @kind color */
  --secondary-sage-50: rgb(244,247,244); /* @kind color */
  --secondary-sage-600: rgb(69,79,69); /* @kind color */
  --secondary-slate-teal: rgb(44,95,120); /* @kind color */
  --surface-background-base: var(--neutral-050); /* @kind color */
  --ui-elements-negative-red: rgb(255,107,107); /* @kind color */
  --ui-elements-stable-yellow: rgb(237,197,0); /* @kind color */
  --ui-elements-white: rgb(255,255,255); /* @kind color */
  --x10: 40; /* @kind spacing */
  --x12-2: 48; /* @kind spacing */
  --x12: 48; /* @kind spacing */
  --x15: 60; /* @kind spacing */
  --x1: 4; /* @kind spacing */
  --x20: 80; /* @kind spacing */
  --x2: 8; /* @kind spacing */
  --x30: 120; /* @kind spacing */
  --x3: 12; /* @kind spacing */
  --x4-2: 16; /* @kind spacing */
  --x4: 16; /* @kind spacing */
  --x5: 20; /* @kind spacing */
  --x6: 24; /* @kind spacing */
  --x8: 32; /* @kind spacing */
}

:root[data-theme="dark"], .dark {
  --bg-surface-neutral-grey-primary-bg: var(--neutral-800); /* @kind color */
  --carbon-neutral-900: var(--neutral-050); /* @kind color */
  --surface-background-base: var(--neutral-1000); /* @kind color */
}

:root[data-mode="mode"] {
  --alpha-cream-12: rgba(236,234,209,0.12); /* @kind color */
  --alpha-cream-32: rgba(236,234,209,0.32); /* @kind color */
  --alpha-cream-72: rgba(236,234,209,0.72); /* @kind color */
  --alpha-mint-12: rgba(109,255,138,0.12); /* @kind color */
  --alpha-mint-32: rgba(109,255,138,0.32); /* @kind color */
  --alpha-mint-80: rgba(109,255,138,0.8); /* @kind color */
  --alpha-negative-red-24: rgba(255,107,107,0.24); /* @kind color */
  --alpha-negative-red-80: rgba(255,107,107,0.8); /* @kind color */
  --alpha-negative-red-8: rgba(255,107,107,0.08); /* @kind color */
  --alpha-soft-black-24: rgba(16,17,14,0.24); /* @kind color */
  --alpha-soft-black-40: rgba(16,17,14,0.4); /* @kind color */
  --alpha-soft-black-72: rgba(16,17,14,0.72); /* @kind color */
  --alpha-soft-black-8: rgba(16,17,14,0.08); /* @kind color */
  --alpha-white-16: rgba(255,255,255,0.16); /* @kind color */
  --alpha-white-32: rgba(255,255,255,0.32); /* @kind color */
  --alpha-white-60: rgba(255,255,255,0.6); /* @kind color */
  --alpha-white-88: rgba(255,255,255,0.88); /* @kind color */
  --alpha-white-8: rgba(255,255,255,0.08); /* @kind color */
  --black-ladder-carbon-olive: rgb(21,23,15); /* @kind color */
  --black-ladder-product-black: rgb(41,44,50); /* @kind color */
  --black-ladder-soft-black: rgb(16,17,14); /* @kind color */
  --neutrals-white-alpha-100: rgb(255,255,255); /* @kind color */
  --primary-cream: rgb(236,234,209); /* @kind color */
  --primary-forest: rgb(7,84,52); /* @kind color */
  --primary-mint-2: rgb(109,255,138); /* @kind color */
  --primary-product-green: rgb(19,198,54); /* @kind color */
  --secondary-sage-100: rgb(232,238,232); /* @kind color */
  --secondary-sage-200: rgb(208,217,208); /* @kind color */
  --secondary-sage-300-2: rgb(155,168,155); /* @kind color */
  --secondary-sage-400: rgb(120,133,120); /* @kind color */
  --secondary-sage-500: rgb(86,99,86); /* @kind color */
  --secondary-sage-50: rgb(244,247,244); /* @kind color */
  --secondary-sage-600: rgb(69,79,69); /* @kind color */
  --ui-elements-negative-red: rgb(255,107,107); /* @kind color */
  --ui-elements-stable-yellow: rgb(237,197,0); /* @kind color */
  --ui-elements-white: rgb(255,255,255); /* @kind color */
}