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

:root {
  --12px-2: 12;
  --12px-3: 12;
  --12px-4: 12;
  --12px-5: 12;
  --12px: 12;
  --16px-2: 16;
  --16px-3: 16;
  --16px-4: 16;
  --16px-5: 16;
  --16px: 16;
  --20px-2: 20;
  --20px-3: 20;
  --20px: 20;
  --24px-2: 24;
  --24px-3: 24;
  --24px: 24;
  --4px-2: 4;
  --4px-3: 4;
  --4px: 4;
  --8px-2: 8;
  --8px-3: 8;
  --8px: 8;
  --additional-base-black: rgb(0,0,0); /* @kind color */
  --additional-base-white: rgb(255,255,255); /* @kind color */
  --additional-black-2: rgb(0,0,0); /* @kind color */
  --additional-black-3: rgb(0,0,0); /* @kind color */
  --additional-black: rgb(0,0,0); /* @kind color */
  --additional-sky-0: rgb(240,251,255); /* @kind color */
  --additional-sky-100: rgb(51,207,255); /* @kind color */
  --additional-sky-200: rgb(17,107,151); /* @kind color */
  --additional-sky-25: rgb(209,240,250); /* @kind color */
  --additional-sky-300: rgb(12,78,110); /* @kind color */
  --additional-sky-50: rgb(126,221,241); /* @kind color */
  --additional-white-2: rgb(255,255,255); /* @kind color */
  --additional-white-3: rgb(255,255,255); /* @kind color */
  --additional-white-4: rgb(255,255,255); /* @kind color */
  --additional-white: rgb(255,255,255); /* @kind color */
  --alert-error-0: rgb(255,240,243); /* @kind color */
  --alert-error-100-2: rgb(223,28,65); /* @kind color */
  --alert-error-100-3: rgb(223,28,65); /* @kind color */
  --alert-error-100: rgb(223,28,65); /* @kind color */
  --alert-error-200-2: rgb(150,19,44); /* @kind color */
  --alert-error-200: rgb(150,19,44); /* @kind color */
  --alert-error-25-2: rgb(250,219,225); /* @kind color */
  --alert-error-25: rgb(250,219,225); /* @kind color */
  --alert-error-300-2: rgb(113,14,33); /* @kind color */
  --alert-error-300: rgb(113,14,33); /* @kind color */
  --alert-error-50: rgb(237,130,150); /* @kind color */
  --alert-success-0: rgb(239,254,250); /* @kind color */
  --alert-success-100-2: rgb(64,196,170); /* @kind color */
  --alert-success-100: rgb(64,196,170); /* @kind color */
  --alert-success-200: rgb(40,128,111); /* @kind color */
  --alert-success-25-2: rgb(221,243,239); /* @kind color */
  --alert-success-25: rgb(221,243,239); /* @kind color */
  --alert-success-300-2: rgb(24,78,68); /* @kind color */
  --alert-success-300: rgb(24,78,68); /* @kind color */
  --alert-success-50: rgb(158,225,212); /* @kind color */
  --alert-warning-0: rgb(255,246,224); /* @kind color */
  --alert-warning-100-2: rgb(255,190,76); /* @kind color */
  --alert-warning-100: rgb(255,190,76); /* @kind color */
  --alert-warning-200-2: rgb(150,100,34); /* @kind color */
  --alert-warning-200: rgb(150,100,34); /* @kind color */
  --alert-warning-25-2: rgb(250,237,204); /* @kind color */
  --alert-warning-25: rgb(250,237,204); /* @kind color */
  --alert-warning-300: rgb(92,61,31); /* @kind color */
  --alert-warning-50: rgb(252,218,131); /* @kind color */
  --background-bg-white: var(--color-neutral-dpop-black-1); /* @kind color */
  --base-background: var(--additional-white-3); /* @kind color */
  --base-default-background-2: var(--additional-black-3); /* @kind color */
  --base-default-background-3: var(--additional-base-black); /* @kind color */
  --base-default-background: var(--additional-black-3); /* @kind color */
  --base-error: var(--alert-error-100-2); /* @kind color */
  --base-primary-2: var(--primary-300-3); /* @kind color */
  --base-primary: var(--primary-300-2); /* @kind color */
  --base-secondary: var(--secondary-300); /* @kind color */
  --base-success: var(--alert-success-100); /* @kind color */
  --base-text-paragraph: rgb(111,111,111); /* @kind color */
  --base-warning: var(--alert-warning-100); /* @kind color */
  --color-greyscale-200: rgb(193,199,208); /* @kind color */
  --color-greyscale-25: rgb(246,248,250); /* @kind color */
  --color-greyscale-500: rgb(102,109,128); /* @kind color */
  --color-greyscale-800: rgb(26,27,37); /* @kind color */
  --color-neutral-dpop-black-1-2: rgb(255,255,255); /* @kind color */
  --color-neutral-dpop-black-13-2: rgb(0,0,0); /* @kind color */
  --color-neutral-dpop-black-13: rgb(0,0,0); /* @kind color */
  --color-neutral-dpop-black-1: rgb(255,255,255); /* @kind color */
  --color-neutral-dpop-black-3: rgb(245,245,245); /* @kind color */
  --color-neutral-dpop-black-4: rgb(240,240,240); /* @kind color */
  --color-neutral-dpop-black-5: rgb(217,217,217); /* @kind color */
  --color-neutral-dpop-black-7: rgb(140,140,140); /* @kind color */
  --color-primary-0: rgb(224,239,255); /* @kind color */
  --color-primary-300: rgb(1,121,255); /* @kind color */
  --default-200: var(--color-greyscale-200); /* @kind color */
  --default-25: var(--color-greyscale-25); /* @kind color */
  --error-error-0: var(--alert-error-0); /* @kind color */
  --error-error-100: var(--alert-error-100-2); /* @kind color */
  --error-error-200: var(--alert-error-200); /* @kind color */
  --error-error-25: var(--alert-error-25); /* @kind color */
  --error-error-300: var(--alert-error-300); /* @kind color */
  --error-error-50: var(--alert-error-50); /* @kind color */
  --greyscale-0-2: rgb(248,250,251); /* @kind color */
  --greyscale-0: rgb(248,250,251); /* @kind color */
  --greyscale-100-2: rgb(223,225,231); /* @kind color */
  --greyscale-100-3: rgb(223,225,231); /* @kind color */
  --greyscale-100: rgb(223,225,231); /* @kind color */
  --greyscale-200-2: rgb(193,199,208); /* @kind color */
  --greyscale-200: rgb(193,199,208); /* @kind color */
  --greyscale-25-2: rgb(246,248,250); /* @kind color */
  --greyscale-25-3: rgb(246,248,250); /* @kind color */
  --greyscale-25: rgb(246,248,250); /* @kind color */
  --greyscale-300-2: rgb(164,172,185); /* @kind color */
  --greyscale-300: rgb(164,172,185); /* @kind color */
  --greyscale-400-2: rgb(129,136,152); /* @kind color */
  --greyscale-400-3: rgb(129,136,152); /* @kind color */
  --greyscale-400: rgb(129,136,152); /* @kind color */
  --greyscale-50-2: rgb(236,239,243); /* @kind color */
  --greyscale-500-2: rgb(102,109,128); /* @kind color */
  --greyscale-500: rgb(102,109,128); /* @kind color */
  --greyscale-50: rgb(236,239,243); /* @kind color */
  --greyscale-600-2: rgb(54,57,74); /* @kind color */
  --greyscale-600: rgb(54,57,74); /* @kind color */
  --greyscale-700-2: rgb(39,40,53); /* @kind color */
  --greyscale-700-3: rgb(39,40,53); /* @kind color */
  --greyscale-700: rgb(39,40,53); /* @kind color */
  --greyscale-800-2: rgb(26,27,37); /* @kind color */
  --greyscale-800-3: rgb(27,27,27); /* @kind color */
  --greyscale-800-4: rgb(26,27,37); /* @kind color */
  --greyscale-800: rgb(27,27,27); /* @kind color */
  --greyscale-900-2: rgb(13,13,18); /* @kind color */
  --greyscale-900: rgb(13,13,18); /* @kind color */
  --greyscale-greyscale-0-2: var(--greyscale-0-2); /* @kind color */
  --greyscale-greyscale-0: var(--greyscale-0); /* @kind color */
  --greyscale-greyscale-100-2: var(--greyscale-100-3); /* @kind color */
  --greyscale-greyscale-100: var(--greyscale-100-2); /* @kind color */
  --greyscale-greyscale-200-2: var(--greyscale-200-2); /* @kind color */
  --greyscale-greyscale-200: var(--greyscale-200); /* @kind color */
  --greyscale-greyscale-25-2: var(--greyscale-25-3); /* @kind color */
  --greyscale-greyscale-25: var(--greyscale-25-2); /* @kind color */
  --greyscale-greyscale-300-2: var(--greyscale-300-2); /* @kind color */
  --greyscale-greyscale-300: var(--greyscale-300); /* @kind color */
  --greyscale-greyscale-400: var(--greyscale-400); /* @kind color */
  --greyscale-greyscale-50-2: var(--greyscale-50-2); /* @kind color */
  --greyscale-greyscale-500: var(--greyscale-500); /* @kind color */
  --greyscale-greyscale-50: var(--greyscale-50); /* @kind color */
  --greyscale-greyscale-600: var(--greyscale-600); /* @kind color */
  --greyscale-greyscale-700-2: var(--greyscale-700-3); /* @kind color */
  --greyscale-greyscale-700: var(--greyscale-700-2); /* @kind color */
  --greyscale-greyscale-800: var(--greyscale-800-2); /* @kind color */
  --greyscale-greyscale-900-2: var(--greyscale-900-2); /* @kind color */
  --greyscale-greyscale-900: var(--greyscale-900); /* @kind color */
  --icons-accent: rgb(49,123,255); /* @kind color */
  --icons-primary: rgb(38,46,61); /* @kind color */
  --icons-secondary-extra-light: rgb(216,219,228); /* @kind color */
  --layout-radius-radius-2xl: 20;
  --layout-radius-radius-3xl: 24;
  --layout-radius-radius-4xl-2: 30;
  --layout-radius-radius-4xl: 30;
  --layout-radius-radius-lg-2: 12;
  --layout-radius-radius-lg-3: 12;
  --layout-radius-radius-lg-4: 12;
  --layout-radius-radius-lg-5: 12;
  --layout-radius-radius-lg: 12;
  --layout-radius-radius-md: 10;
  --layout-radius-radius-sm-2: 8;
  --layout-radius-radius-sm: 8;
  --layout-radius-radius-xl: 16;
  --layout-radius-radius-xs: 4;
  --layout-spacing-10px: 10;
  --layout-spacing-12px-2: 12;
  --layout-spacing-12px-3: 12;
  --layout-spacing-12px-4: 12;
  --layout-spacing-12px: 12;
  --layout-spacing-16px-2: 16;
  --layout-spacing-16px-3: 16;
  --layout-spacing-16px-4: 16;
  --layout-spacing-16px: 16;
  --layout-spacing-20px: 20;
  --layout-spacing-24px: 24;
  --layout-spacing-32px: 32;
  --layout-spacing-40px: 40;
  --layout-spacing-48px: 48;
  --layout-spacing-4px: 4;
  --layout-spacing-64px: 64;
  --layout-spacing-8px-2: 8;
  --layout-spacing-8px: 8;
  --primary-0: rgb(232,242,255); /* @kind color */
  --primary-100: rgb(115,174,247); /* @kind color */
  --primary-200-2: rgb(51,129,255); /* @kind color */
  --primary-200: rgb(69,147,245); /* @kind color */
  --primary-25-2: rgb(204,224,255); /* @kind color */
  --primary-25: rgb(208,228,252); /* @kind color */
  --primary-300-2: rgb(22,120,242); /* @kind color */
  --primary-300-3: rgb(22,120,242); /* @kind color */
  --primary-300: rgb(1,113,255); /* @kind color */
  --primary-50: rgb(162,201,250); /* @kind color */
  --primary-primary-0: var(--primary-0); /* @kind color */
  --primary-primary-100: var(--primary-100); /* @kind color */
  --primary-primary-200: var(--primary-200); /* @kind color */
  --primary-primary-25: var(--primary-25); /* @kind color */
  --primary-primary-300: var(--primary-300-2); /* @kind color */
  --primary-primary-50: var(--primary-50); /* @kind color */
  --radius-2xl-2: 20;
  --radius-2xl-3: 20;
  --radius-2xl: 20;
  --radius-lg: 12;
  --radius-xl: 15;
  --radius-xs: 4;
  --secondary-0: rgb(255,243,229); /* @kind color */
  --secondary-100: rgb(255,186,102); /* @kind color */
  --secondary-200: rgb(255,163,51); /* @kind color */
  --secondary-25: rgb(255,232,204); /* @kind color */
  --secondary-300: rgb(255,140,0); /* @kind color */
  --secondary-50: rgb(255,209,153); /* @kind color */
  --secondary-secondary-0: var(--secondary-0); /* @kind color */
  --secondary-secondary-100: var(--secondary-100); /* @kind color */
  --secondary-secondary-200: var(--secondary-200); /* @kind color */
  --secondary-secondary-25: var(--secondary-25); /* @kind color */
  --secondary-secondary-300: var(--secondary-300); /* @kind color */
  --secondary-secondary-50: var(--secondary-50); /* @kind color */
  --sky-sky-0: var(--additional-sky-0); /* @kind color */
  --sky-sky-100: var(--additional-sky-100); /* @kind color */
  --sky-sky-200: var(--additional-sky-200); /* @kind color */
  --sky-sky-25: var(--additional-sky-25); /* @kind color */
  --sky-sky-300: var(--additional-sky-300); /* @kind color */
  --sky-sky-50: var(--additional-sky-50); /* @kind color */
  --success-success-0: var(--alert-success-0); /* @kind color */
  --success-success-100: var(--alert-success-100); /* @kind color */
  --success-success-200: var(--alert-success-200); /* @kind color */
  --success-success-25: var(--alert-success-25); /* @kind color */
  --success-success-300: var(--alert-success-300); /* @kind color */
  --success-success-50: var(--alert-success-50); /* @kind color */
  --text-text-bold: var(--color-neutral-dpop-black-13); /* @kind color */
  --text-text-gentle: var(--color-neutral-dpop-black-7); /* @kind color */
  --text-text-white-constant: var(--color-neutral-dpop-black-1); /* @kind color */
  --text-text-white: var(--color-neutral-dpop-black-1); /* @kind color */
  --warning-warning-0: var(--alert-warning-0); /* @kind color */
  --warning-warning-100: var(--alert-warning-100); /* @kind color */
  --warning-warning-200: var(--alert-warning-200); /* @kind color */
  --warning-warning-25: var(--alert-warning-25); /* @kind color */
  --warning-warning-300: var(--alert-warning-300); /* @kind color */
  --warning-warning-50: var(--alert-warning-50); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --background-bg-white: var(--color-neutral-dpop-black-13); /* @kind color */
  --base-background: var(--additional-black-3); /* @kind color */
  --base-default-background-2: var(--additional-white-3); /* @kind color */
  --base-default-background-3: var(--additional-base-white); /* @kind color */
  --base-default-background: var(--additional-white-3); /* @kind color */
  --base-error: var(--alert-error-100-2); /* @kind color */
  --base-primary-2: var(--primary-300-3); /* @kind color */
  --base-primary: var(--primary-300-2); /* @kind color */
  --base-secondary: var(--secondary-300); /* @kind color */
  --base-success: var(--alert-success-100); /* @kind color */
  --base-text-paragraph: rgb(151,151,151); /* @kind color */
  --base-warning: var(--alert-warning-100); /* @kind color */
  --default-200: var(--color-greyscale-500); /* @kind color */
  --default-25: var(--color-greyscale-800); /* @kind color */
  --error-error-0: var(--alert-error-300); /* @kind color */
  --error-error-100: var(--alert-error-50); /* @kind color */
  --error-error-200: var(--alert-error-25); /* @kind color */
  --error-error-25: var(--alert-error-200); /* @kind color */
  --error-error-300: var(--alert-error-0); /* @kind color */
  --error-error-50: var(--alert-error-100-2); /* @kind color */
  --greyscale-greyscale-0-2: var(--greyscale-900-2); /* @kind color */
  --greyscale-greyscale-0: var(--greyscale-900); /* @kind color */
  --greyscale-greyscale-100-2: var(--greyscale-600-2); /* @kind color */
  --greyscale-greyscale-100: var(--greyscale-600); /* @kind color */
  --greyscale-greyscale-200-2: var(--greyscale-500-2); /* @kind color */
  --greyscale-greyscale-200: var(--greyscale-500); /* @kind color */
  --greyscale-greyscale-25-2: var(--greyscale-800-4); /* @kind color */
  --greyscale-greyscale-25: var(--greyscale-800-2); /* @kind color */
  --greyscale-greyscale-300-2: var(--greyscale-400-3); /* @kind color */
  --greyscale-greyscale-300: var(--greyscale-400); /* @kind color */
  --greyscale-greyscale-400: var(--greyscale-300); /* @kind color */
  --greyscale-greyscale-50-2: var(--greyscale-700-3); /* @kind color */
  --greyscale-greyscale-500: var(--greyscale-200); /* @kind color */
  --greyscale-greyscale-50: var(--greyscale-700-2); /* @kind color */
  --greyscale-greyscale-600: var(--greyscale-100-2); /* @kind color */
  --greyscale-greyscale-700-2: var(--greyscale-50-2); /* @kind color */
  --greyscale-greyscale-700: var(--greyscale-50); /* @kind color */
  --greyscale-greyscale-800: var(--greyscale-25-2); /* @kind color */
  --greyscale-greyscale-900-2: var(--greyscale-0-2); /* @kind color */
  --greyscale-greyscale-900: var(--greyscale-0); /* @kind color */
  --icons-accent: rgb(49,123,255); /* @kind color */
  --icons-primary: rgb(255,255,255); /* @kind color */
  --icons-secondary-extra-light: rgb(61,67,87); /* @kind color */
  --layout-radius-radius-2xl: 20;
  --layout-radius-radius-3xl: 24;
  --layout-radius-radius-4xl-2: 30;
  --layout-radius-radius-4xl: 30;
  --layout-radius-radius-lg-2: 12;
  --layout-radius-radius-lg-3: 12;
  --layout-radius-radius-lg-4: 12;
  --layout-radius-radius-lg-5: 12;
  --layout-radius-radius-lg: 12;
  --layout-radius-radius-md: 10;
  --layout-radius-radius-sm-2: 8;
  --layout-radius-radius-sm: 8;
  --layout-radius-radius-xl: 16;
  --layout-radius-radius-xs: 4;
  --layout-spacing-10px: 10;
  --layout-spacing-12px-2: 12;
  --layout-spacing-12px-3: 12;
  --layout-spacing-12px-4: 12;
  --layout-spacing-12px: 12;
  --layout-spacing-16px-2: 16;
  --layout-spacing-16px-3: 16;
  --layout-spacing-16px-4: 16;
  --layout-spacing-16px: 16;
  --layout-spacing-20px: 20;
  --layout-spacing-24px: 24;
  --layout-spacing-32px: 32;
  --layout-spacing-40px: 40;
  --layout-spacing-48px: 48;
  --layout-spacing-4px: 4;
  --layout-spacing-64px: 64;
  --layout-spacing-8px-2: 8;
  --layout-spacing-8px: 8;
  --primary-primary-0: var(--primary-300-2); /* @kind color */
  --primary-primary-100: var(--primary-50); /* @kind color */
  --primary-primary-200: var(--primary-25); /* @kind color */
  --primary-primary-25: var(--primary-200); /* @kind color */
  --primary-primary-300: var(--primary-0); /* @kind color */
  --primary-primary-50: var(--primary-100); /* @kind color */
  --secondary-secondary-0: var(--secondary-300); /* @kind color */
  --secondary-secondary-100: var(--secondary-50); /* @kind color */
  --secondary-secondary-200: var(--secondary-25); /* @kind color */
  --secondary-secondary-25: var(--secondary-200); /* @kind color */
  --secondary-secondary-300: var(--secondary-0); /* @kind color */
  --secondary-secondary-50: var(--secondary-100); /* @kind color */
  --sky-sky-0: var(--additional-sky-300); /* @kind color */
  --sky-sky-100: var(--additional-sky-50); /* @kind color */
  --sky-sky-200: var(--additional-sky-25); /* @kind color */
  --sky-sky-25: var(--additional-sky-200); /* @kind color */
  --sky-sky-300: var(--additional-sky-0); /* @kind color */
  --sky-sky-50: var(--additional-sky-100); /* @kind color */
  --success-success-0: var(--alert-success-300); /* @kind color */
  --success-success-100: var(--alert-success-50); /* @kind color */
  --success-success-200: var(--alert-success-25); /* @kind color */
  --success-success-25: var(--alert-success-200); /* @kind color */
  --success-success-300: var(--alert-success-0); /* @kind color */
  --success-success-50: var(--alert-success-100); /* @kind color */
  --text-text-bold: var(--color-neutral-dpop-black-1); /* @kind color */
  --text-text-gentle: var(--color-neutral-dpop-black-4); /* @kind color */
  --text-text-white-constant: var(--color-neutral-dpop-black-1-2); /* @kind color */
  --text-text-white: var(--color-neutral-dpop-black-13-2); /* @kind color */
  --warning-warning-0: var(--alert-warning-300); /* @kind color */
  --warning-warning-100: var(--alert-warning-50); /* @kind color */
  --warning-warning-200: var(--alert-warning-25); /* @kind color */
  --warning-warning-25: var(--secondary-200); /* @kind color */
  --warning-warning-300: var(--alert-warning-0); /* @kind color */
  --warning-warning-50: var(--alert-warning-100); /* @kind color */
}