:root,
:host {
  /* Color / Gray */

  --primitive-color-gray-0: #ffffff;
  --primitive-color-gray-0-80: rgba(255, 255, 255, 0.8);
  --primitive-color-gray-50: #fcfcfd;
  --primitive-color-gray-100: #ebecef;
  --primitive-color-gray-150: #d9dae1;
  --primitive-color-gray-200: #c6c8d2;
  --primitive-color-gray-250: #b5b8c5;
  --primitive-color-gray-300: #a3a8b8;
  --primitive-color-gray-400: #82879a;
  --primitive-color-gray-500: #60667c;
  --primitive-color-gray-600: #4d5264;
  --primitive-color-gray-700: #3a3e4b;
  --primitive-color-gray-750: #30333e;
  --primitive-color-gray-800: #262831;
  --primitive-color-gray-900: #14151a;
  --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
  --primitive-color-gray-1000: #000000;
  --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);

  /* Color / Brand */

  --primitive-color-brand-50: #e5f0ff;
  --primitive-color-brand-100: #bfdfff;
  --primitive-color-brand-200: #99ceff;
  --primitive-color-brand-300: #66a6ff;
  --primitive-color-brand-400: #3388ff;
  --primitive-color-brand-500: #006aff;
  --primitive-color-brand-600: #0055cc;
  --primitive-color-brand-900: #21273b;

  /* Color / Brand Secondary */

  --primitive-color-brand-secondary-50: #f2e2fe;
  --primitive-color-brand-secondary-500: #820ad1;

  /* Color / Focus */

  --primitive-color-focus-400: #0099ff;
  --primitive-color-focus-500: #006aff;

  /* Color / Positive */

  --primitive-color-positive-50: #e4fbf0;
  --primitive-color-positive-400: #45b380;
  --primitive-color-positive-500: #189f60;
  --primitive-color-positive-750: #0c5030;
  --primitive-color-positive-950: #03190e;

  /* Color / Warning */

  --primitive-color-warning-50: #fff7eb;
  --primitive-color-warning-400: #ffb647;
  --primitive-color-warning-500: #ff9900;
  --primitive-color-warning-750: #523100;
  --primitive-color-warning-950: #271400;

  /* Color / Negative */

  --primitive-color-negative-50: #fff0f0;
  --primitive-color-negative-400: #ff5a5f;
  --primitive-color-negative-500: #e71111;
  --primitive-color-negative-950: #240001;

  /* Typography / Family */

  --primitive-typography-family-rethink-sans: 'Rethink Sans';
  --primitive-typography-family-dm-sans: 'DM Sans';

  /* Typography / Size */

  --primitive-typography-size-12: 12px;
  --primitive-typography-size-14: 14px;
  --primitive-typography-size-16: 16px;
  --primitive-typography-size-18: 18px;
  --primitive-typography-size-20: 20px;
  --primitive-typography-size-24: 24px;
  --primitive-typography-size-32: 32px;
  --primitive-typography-size-40: 40px;
  --primitive-typography-size-48: 48px;
  --primitive-typography-size-80: 80px;

  /* Typography / Weight */

  --primitive-typography-weight-regular: 400;
  --primitive-typography-weight-medium: 500;
  --primitive-typography-weight-semibold: 600;
  --primitive-typography-weight-bold: 700;
  --primitive-typography-weight-extrabold: 800;

  /* Typography / Letter Spacing */

  --primitive-typography-letter-spacing-0: 0px;
  --primitive-typography-letter-spacing-2: 2px;
  --primitive-typography-letter-spacing-minus-0-5: -0.5px;
  --primitive-typography-letter-spacing-minus-1: -1px;
  --primitive-typography-letter-spacing-minus-1-5: -1.5px;

  /* Typography / Line Height */

  --primitive-typography-line-height-100: 1;
  --primitive-typography-line-height-105: 1.05;
  --primitive-typography-line-height-110: 1.1;
  --primitive-typography-line-height-115: 1.15;
  --primitive-typography-line-height-120: 1.2;
  --primitive-typography-line-height-125: 1.25;
  --primitive-typography-line-height-130: 1.3;

  /* Typography / Paragraph Spacing */

  /* 100% */
  --primitive-typography-paragraph-spacing-100-12: 9px;
  --primitive-typography-paragraph-spacing-100-14: 10.5px;
  --primitive-typography-paragraph-spacing-100-16: 12px;
  --primitive-typography-paragraph-spacing-100-18: 13.5px;
  --primitive-typography-paragraph-spacing-100-20: 15px;
  --primitive-typography-paragraph-spacing-100-24: 18px;
  --primitive-typography-paragraph-spacing-100-32: 24px;
  --primitive-typography-paragraph-spacing-100-40: 30px;
  --primitive-typography-paragraph-spacing-100-48: 36px;
  --primitive-typography-paragraph-spacing-100-80: 60px;

  /* 105% */
  --primitive-typography-paragraph-spacing-105-12: 9.45px;
  --primitive-typography-paragraph-spacing-105-14: 11px;
  --primitive-typography-paragraph-spacing-105-16: 12.6px;
  --primitive-typography-paragraph-spacing-105-18: 14.2px;
  --primitive-typography-paragraph-spacing-105-20: 15.8px;
  --primitive-typography-paragraph-spacing-105-24: 18.9px;
  --primitive-typography-paragraph-spacing-105-32: 25.2px;
  --primitive-typography-paragraph-spacing-105-40: 31.5px;
  --primitive-typography-paragraph-spacing-105-48: 37.8px;
  --primitive-typography-paragraph-spacing-105-80: 63px;

  /* 110% */
  --primitive-typography-paragraph-spacing-110-12: 9.9px;
  --primitive-typography-paragraph-spacing-110-14: 11.6px;
  --primitive-typography-paragraph-spacing-110-16: 13.2px;
  --primitive-typography-paragraph-spacing-110-18: 14.9px;
  --primitive-typography-paragraph-spacing-110-20: 16.5px;
  --primitive-typography-paragraph-spacing-110-24: 19.8px;
  --primitive-typography-paragraph-spacing-110-32: 26.4px;
  --primitive-typography-paragraph-spacing-110-40: 33px;
  --primitive-typography-paragraph-spacing-110-48: 39.6px;
  --primitive-typography-paragraph-spacing-110-80: 66px;

  /* 115% */
  --primitive-typography-paragraph-spacing-115-12: 10.4px;
  --primitive-typography-paragraph-spacing-115-14: 12.1px;
  --primitive-typography-paragraph-spacing-115-16: 13.8px;
  --primitive-typography-paragraph-spacing-115-18: 15.5px;
  --primitive-typography-paragraph-spacing-115-20: 17.3px;
  --primitive-typography-paragraph-spacing-115-24: 20.7px;
  --primitive-typography-paragraph-spacing-115-32: 27.6px;
  --primitive-typography-paragraph-spacing-115-40: 34.5px;
  --primitive-typography-paragraph-spacing-115-48: 41.4px;
  --primitive-typography-paragraph-spacing-115-80: 69px;

  /* 120% */
  --primitive-typography-paragraph-spacing-120-12: 10.8px;
  --primitive-typography-paragraph-spacing-120-14: 12.6px;
  --primitive-typography-paragraph-spacing-120-16: 14.4px;
  --primitive-typography-paragraph-spacing-120-18: 16.2px;
  --primitive-typography-paragraph-spacing-120-20: 18px;
  --primitive-typography-paragraph-spacing-120-24: 21.6px;
  --primitive-typography-paragraph-spacing-120-32: 28.8px;
  --primitive-typography-paragraph-spacing-120-40: 36px;
  --primitive-typography-paragraph-spacing-120-48: 43.2px;
  --primitive-typography-paragraph-spacing-120-80: 72px;

  /* 125% */
  --primitive-typography-paragraph-spacing-125-12: 11.3px;
  --primitive-typography-paragraph-spacing-125-14: 13.1px;
  --primitive-typography-paragraph-spacing-125-16: 15px;
  --primitive-typography-paragraph-spacing-125-18: 16.9px;
  --primitive-typography-paragraph-spacing-125-20: 18.8px;
  --primitive-typography-paragraph-spacing-125-24: 22.5px;
  --primitive-typography-paragraph-spacing-125-32: 30px;
  --primitive-typography-paragraph-spacing-125-40: 37.5px;
  --primitive-typography-paragraph-spacing-125-48: 45px;
  --primitive-typography-paragraph-spacing-125-80: 75px;

  /* 130% */
  --primitive-typography-paragraph-spacing-130-12: 11.7px;
  --primitive-typography-paragraph-spacing-130-14: 13.7px;
  --primitive-typography-paragraph-spacing-130-16: 15.6px;
  --primitive-typography-paragraph-spacing-130-18: 17.6px;
  --primitive-typography-paragraph-spacing-130-20: 19.5px;
  --primitive-typography-paragraph-spacing-130-24: 23.4px;
  --primitive-typography-paragraph-spacing-130-32: 31.2px;
  --primitive-typography-paragraph-spacing-130-40: 39px;
  --primitive-typography-paragraph-spacing-130-48: 46.8px;
  --primitive-typography-paragraph-spacing-130-80: 78px;

  /* Border / Width */

  --primitive-border-width-0: 0px;
  --primitive-border-width-1: 1px;
  --primitive-border-width-1-5: 1.5px;
  --primitive-border-width-2: 2px;
  --primitive-border-width-4: 4px;

  /* Border / Radius */

  --primitive-border-radius-0: 0px;
  --primitive-border-radius-4: 4px;
  --primitive-border-radius-8: 8px;
  --primitive-border-radius-16: 16px;
  --primitive-border-radius-24: 24px;
  --primitive-border-radius-40: 40px;
  --primitive-border-radius-64: 64px;
  --primitive-border-radius-9999: 9999px;

  /* Scale */

  --primitive-scale-0: 0px;
  --primitive-scale-2: 2px;
  --primitive-scale-4: 4px;
  --primitive-scale-8: 8px;
  --primitive-scale-12: 12px;
  --primitive-scale-16: 16px;
  --primitive-scale-20: 20px;
  --primitive-scale-24: 24px;
  --primitive-scale-32: 32px;
  --primitive-scale-40: 40px;
  --primitive-scale-48: 48px;
  --primitive-scale-56: 56px;
  --primitive-scale-64: 64px;
  --primitive-scale-72: 72px;
  --primitive-scale-80: 80px;
  --primitive-scale-88: 88px;
  --primitive-scale-96: 96px;
  --primitive-scale-104: 104px;
  --primitive-scale-120: 120px;
  --primitive-scale-128: 128px;
  --primitive-scale-200: 200px;
}
:root,
:host {
  /* Border / Width */

  --border-width-none: var(--primitive-border-width-0);
  --border-width-regular: var(--primitive-border-width-1);
  --border-width-medium: var(--primitive-border-width-1-5);
  --border-width-bold: var(--primitive-border-width-2);

  /* Border / Radius */

  --border-radius-none: var(--primitive-border-radius-0);
  --border-radius-x-small: var(--primitive-border-radius-4);
  --border-radius-small: var(--primitive-border-radius-8);
  --border-radius-medium: var(--primitive-border-radius-16);
  --border-radius-large: var(--primitive-border-radius-24);
  --border-radius-x-large: var(--primitive-border-radius-40);
  --border-radius-xx-large: var(--primitive-border-radius-64);
  --border-radius-full: var(--primitive-border-radius-9999);

  /* Spacing */

  --spacing-none: var(--primitive-scale-0);
  --spacing-2: var(--primitive-scale-2);
  --spacing-4: var(--primitive-scale-4);
  --spacing-8: var(--primitive-scale-8);
  --spacing-12: var(--primitive-scale-12);
  --spacing-16: var(--primitive-scale-16);
  --spacing-20: var(--primitive-scale-20);
  --spacing-24: var(--primitive-scale-24);
  --spacing-32: var(--primitive-scale-32);
  --spacing-40: var(--primitive-scale-40);
  --spacing-48: var(--primitive-scale-48);
  --spacing-64: var(--primitive-scale-64);
  --spacing-80: var(--primitive-scale-80);
  --spacing-96: var(--primitive-scale-96);
  --spacing-104: var(--primitive-scale-104);
  --spacing-120: var(--primitive-scale-120);
  --spacing-200: var(--primitive-scale-200);

  /* Icon / Size */

  --icon-size-xx-small: var(--primitive-scale-16);
  --icon-size-x-small: var(--primitive-scale-20);
  --icon-size-small: var(--primitive-scale-24);
  --icon-size-medium: var(--primitive-scale-32);
  --icon-size-large: var(--primitive-scale-40);
  --icon-size-x-large: var(--primitive-scale-48);
  --icon-size-xx-large: var(--primitive-scale-64);
  --icon-size-xxx-large: var(--primitive-scale-80);

  /* Typography */

  /* Display */
  --typography-display-family: var(--primitive-typography-family-rethink-sans);

  /* Display/D1 */
  --typography-display-d1-size: var(--primitive-typography-size-80);
  --typography-display-d1-weight: var(--primitive-typography-weight-extrabold);
  --typography-display-d1-line-height: var(
    --primitive-typography-line-height-105
  );
  --typography-display-d1-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-1-5
  );
  --typography-display-d1-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-105-80
  );

  /* Display/D2 */
  --typography-display-d2-size: var(--primitive-typography-size-48);
  --typography-display-d2-weight: var(--primitive-typography-weight-extrabold);
  --typography-display-d2-line-height: var(
    --primitive-typography-line-height-105
  );
  --typography-display-d2-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-display-d2-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-105-48
  );

  /* Headline */
  --typography-headline-family: var(--primitive-typography-family-dm-sans);

  /* Headline/H1 */
  --typography-headline-h1-size: var(--primitive-typography-size-32);
  --typography-headline-h1-weight: var(--primitive-typography-weight-bold);
  --typography-headline-h1-line-height: var(
    --primitive-typography-line-height-115
  );
  --typography-headline-h1-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-1-5
  );
  --typography-headline-h1-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-115-32
  );

  /* Headline/H2 */
  --typography-headline-h2-size: var(--primitive-typography-size-24);
  --typography-headline-h2-weight: var(--primitive-typography-weight-bold);
  --typography-headline-h2-line-height: var(
    --primitive-typography-line-height-115
  );
  --typography-headline-h2-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-1
  );
  --typography-headline-h2-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-115-24
  );

  /* Headline/H3 */
  --typography-headline-h3-size: var(--primitive-typography-size-20);
  --typography-headline-h3-weight: var(--primitive-typography-weight-bold);
  --typography-headline-h3-line-height: var(
    --primitive-typography-line-height-115
  );
  --typography-headline-h3-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-headline-h3-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-115-20
  );

  /* Headline/H4 */
  --typography-headline-h4-size: var(--primitive-typography-size-18);
  --typography-headline-h4-weight: var(--primitive-typography-weight-medium);
  --typography-headline-h4-line-height: var(
    --primitive-typography-line-height-115
  );
  --typography-headline-h4-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-headline-h4-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-115-18
  );

  /* Headline/H5 */
  --typography-headline-h5-size: var(--primitive-typography-size-16);
  --typography-headline-h5-weight: var(--primitive-typography-weight-medium);
  --typography-headline-h5-line-height: var(
    --primitive-typography-line-height-115
  );
  --typography-headline-h5-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-headline-h5-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-115-16
  );

  /* Body */
  --typography-body-family: var(--primitive-typography-family-dm-sans);

  /* Body/S Regular */
  --typography-body-s-regular-size: var(--primitive-typography-size-12);
  --typography-body-s-regular-weight: var(
    --primitive-typography-weight-regular
  );
  --typography-body-s-regular-line-height: var(
    --primitive-typography-line-height-130
  );
  --typography-body-s-regular-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-body-s-regular-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-130-12
  );

  /* Body/S Body */
  --typography-body-s-bold-size: var(--primitive-typography-size-12);
  --typography-body-s-bold-weight: var(--primitive-typography-weight-bold);
  --typography-body-s-bold-line-height: var(
    --primitive-typography-line-height-130
  );
  --typography-body-s-bold-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-body-s-bold-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-130-12
  );

  /* Body/M Regular */
  --typography-body-m-regular-size: var(--primitive-typography-size-14);
  --typography-body-m-regular-weight: var(
    --primitive-typography-weight-regular
  );
  --typography-body-m-regular-line-height: var(
    --primitive-typography-line-height-120
  );
  --typography-body-m-regular-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-body-m-regular-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-120-14
  );

  /* Body/M Bold */
  --typography-body-m-bold-size: var(--primitive-typography-size-14);
  --typography-body-m-bold-weight: var(--primitive-typography-weight-bold);
  --typography-body-m-bold-line-height: var(
    --primitive-typography-line-height-130
  );
  --typography-body-m-bold-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-body-m-bold-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-130-14
  );

  /* Link */
  --typography-link-family: var(--primitive-typography-family-dm-sans);

  /* Link/M Bold */
  --typography-link-m-bold-size: var(--primitive-typography-size-14);
  --typography-link-m-bold-weight: var(--primitive-typography-weight-bold);
  --typography-link-m-bold-line-height: var(
    --primitive-typography-line-height-125
  );
  --typography-link-m-bold-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-link-m-bold-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-125-14
  );

  /* Link/M Extrabold */
  --typography-link-m-extrabold-size: var(--primitive-typography-size-14);
  --typography-link-m-extrabold-weight: var(
    --primitive-typography-weight-extrabold
  );
  --typography-link-m-extrabold-line-height: var(
    --primitive-typography-line-height-125
  );
  --typography-link-m-extrabold-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-link-m-extrabold-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-125-14
  );

  /* Link/S Bold */
  --typography-link-s-bold-size: var(--primitive-typography-size-12);
  --typography-link-s-bold-weight: var(--primitive-typography-weight-bold);
  --typography-link-s-bold-line-height: var(
    --primitive-typography-line-height-130
  );
  --typography-link-s-bold-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-link-s-bold-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-130-12
  );

  /* Link/S Medium */
  --typography-link-s-medium-size: var(--primitive-typography-size-12);
  --typography-link-s-medium-weight: var(--primitive-typography-weight-medium);
  --typography-link-s-medium-line-height: var(
    --primitive-typography-line-height-130
  );
  --typography-link-s-medium-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-link-s-medium-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-130-12
  );

  /* Label */
  --typography-label-family: var(--primitive-typography-family-dm-sans);

  /* Label/M */
  --typography-label-m-size: var(--primitive-typography-size-14);
  --typography-label-m-weight: var(--primitive-typography-weight-bold);
  --typography-label-m-line-height: var(--primitive-typography-line-height-100);
  --typography-label-m-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-label-m-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-14
  );

  /* Button */
  --typography-button-family: var(--primitive-typography-family-dm-sans);

  /* Button/M */
  --typography-button-m-size: var(--primitive-typography-size-18);
  --typography-button-m-weight: var(--primitive-typography-weight-medium);
  --typography-button-m-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-button-m-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-button-m-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-18
  );

  /* Button/M Underlined */
  --typography-button-m-underlined-size: var(--primitive-typography-size-18);
  --typography-button-m-underlined-weight: var(
    --primitive-typography-weight-medium
  );
  --typography-button-m-underlined-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-button-m-underlined-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-button-m-underlined-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-18
  );

  /* Button/S */
  --typography-button-s-size: var(--primitive-typography-size-14);
  --typography-button-s-weight: var(--primitive-typography-weight-medium);
  --typography-button-s-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-button-s-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-button-s-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-14
  );

  /* Tooltip */
  --typography-tooltip-family: var(--primitive-typography-family-dm-sans);

  /* Tooltip/M */
  --typography-tooltip-m-size: var(--primitive-typography-size-16);
  --typography-tooltip-m-weight: var(--primitive-typography-weight-medium);
  --typography-tooltip-m-line-height: var(
    --primitive-typography-line-height-115
  );
  --typography-tooltip-m-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-tooltip-m-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-115-16
  );

  /* Feedback */
  --typography-feedback-family: var(--primitive-typography-family-dm-sans);

  /* Feedback/L */
  --typography-feedback-l-size: var(--primitive-typography-size-24);
  --typography-feedback-l-weight: var(--primitive-typography-weight-bold);
  --typography-feedback-l-line-height: var(
    --primitive-typography-line-height-120
  );
  --typography-feedback-l-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-feedback-l-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-120-24
  );

  /* Feedback/S */
  --typography-feedback-s-size: var(--primitive-typography-size-18);
  --typography-feedback-s-weight: var(--primitive-typography-weight-medium);
  --typography-feedback-s-line-height: var(
    --primitive-typography-line-height-120
  );
  --typography-feedback-s-letter-spacing: var(
    --primitive-typography-letter-spacing-minus-0-5
  );
  --typography-feedback-s-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-120-18
  );

  /* Toggle-switch */
  --typography-toggle-switch-family: var(--primitive-typography-family-dm-sans);

  /* Toggle-switch/M */
  --typography-toggle-switch-m-size: var(--primitive-typography-size-16);
  --typography-toggle-switch-m-weight: var(
    --primitive-typography-weight-medium
  );
  --typography-toggle-switch-m-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-toggle-switch-m-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-toggle-switch-m-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-16
  );

  /* Toggle-switch/S */
  --typography-toggle-switch-s-size: var(--primitive-typography-size-14);
  --typography-toggle-switch-s-weight: var(
    --primitive-typography-weight-regular
  );
  --typography-toggle-switch-s-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-toggle-switch-s-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-toggle-switch-s-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-14
  );

  /* Checkbox & Radio */
  --typography-checkbox-radio-family: var(
    --primitive-typography-family-dm-sans
  );

  /* Checkbox & Radio/M */
  --typography-checkbox-radio-m-size: var(--primitive-typography-size-16);
  --typography-checkbox-radio-m-weight: var(
    --primitive-typography-weight-medium
  );
  --typography-checkbox-radio-m-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-checkbox-radio-m-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-checkbox-radio-m-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-16
  );

  /* Checkbox & Radio/S */
  --typography-checkbox-radio-s-size: var(--primitive-typography-size-14);
  --typography-checkbox-radio-s-weight: var(
    --primitive-typography-weight-regular
  );
  --typography-checkbox-radio-s-line-height: var(
    --primitive-typography-line-height-120
  );
  --typography-checkbox-radio-s-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-checkbox-radio-s-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-120-14
  );

  /* Input & Dropdown */
  --typography-input-dropdown-family: var(
    --primitive-typography-family-dm-sans
  );

  /* Input & Dropdown/L */
  --typography-input-dropdown-l-size: var(--primitive-typography-size-24);
  --typography-input-dropdown-l-weight: var(--primitive-typography-weight-bold);
  --typography-input-dropdown-l-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-input-dropdown-l-letter-spacing: var(
    --primitive-typography-letter-spacing-2
  );
  --typography-input-dropdown-l-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-24
  );

  /* Input & Dropdown/M */
  --typography-input-dropdown-m-size: var(--primitive-typography-size-18);
  --typography-input-dropdown-m-weight: var(
    --primitive-typography-weight-medium
  );
  --typography-input-dropdown-m-line-height: var(
    --primitive-typography-line-height-100
  );
  --typography-input-dropdown-m-letter-spacing: var(
    --primitive-typography-letter-spacing-0
  );
  --typography-input-dropdown-m-paragraph-spacing: var(
    --primitive-typography-paragraph-spacing-100-18
  );
}
:root,
:host,
[data-incode-theme='light'] {
  color-scheme: light;

  /* Surface / Neutral */

  --surface-neutral-0: var(--primitive-color-gray-0);
  --surface-neutral-0-80: var(--primitive-color-gray-0-80);
  --surface-neutral-0-static: var(--primitive-color-gray-0);
  --surface-neutral-50: var(--primitive-color-gray-50);
  --surface-neutral-100: var(--primitive-color-gray-100);
  --surface-neutral-100-static: var(--primitive-color-gray-100);
  --surface-neutral-150: var(--primitive-color-gray-150);
  --surface-neutral-200: var(--primitive-color-gray-200);
  --surface-neutral-200-static: var(--primitive-color-gray-200);
  --surface-neutral-250: var(--primitive-color-gray-250);
  --surface-neutral-300: var(--primitive-color-gray-300);
  --surface-neutral-400: var(--primitive-color-gray-400);
  --surface-neutral-500: var(--primitive-color-gray-500);
  --surface-neutral-600: var(--primitive-color-gray-600);
  --surface-neutral-600-static: var(--primitive-color-gray-600);
  --surface-neutral-700: var(--primitive-color-gray-700);
  --surface-neutral-750: var(--primitive-color-gray-750);
  --surface-neutral-800: var(--primitive-color-gray-800);
  --surface-neutral-900: var(--primitive-color-gray-900);
  --surface-neutral-900-80: var(--primitive-color-gray-900-80);
  --surface-neutral-900-static: var(--primitive-color-gray-900);
  --surface-neutral-900-80-static: var(--primitive-color-gray-900-80);
  --surface-neutral-1000: var(--primitive-color-gray-1000);
  --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);

  /* Surface / Brand */

  --surface-brand-50: var(--primitive-color-brand-50);
  --surface-brand-100: var(--primitive-color-brand-100);
  --surface-brand-400-static: var(--primitive-color-brand-400);
  --surface-brand-500: var(--primitive-color-brand-500);
  --surface-brand-500-static: var(--primitive-color-brand-500);
  --surface-brand-600-static: var(--primitive-color-brand-600);
  --surface-brand-900-static: var(--primitive-color-brand-900);

  /* Surface / Status */

  --surface-status-negative-50: var(--primitive-color-negative-50);
  --surface-status-negative-500: var(--primitive-color-negative-500);

  --surface-status-warning-50: var(--primitive-color-warning-50);
  --surface-status-warning-500: var(--primitive-color-warning-500);

  --surface-status-positive-50: var(--primitive-color-positive-50);
  --surface-status-positive-500: var(--primitive-color-positive-500);

  /* Icon / Neutral */

  --icon-neutral-0: var(--primitive-color-gray-0);
  --icon-neutral-0-static: var(--primitive-color-gray-0);
  --icon-neutral-50-static: var(--primitive-color-gray-50);
  --icon-neutral-300: var(--primitive-color-gray-300);
  --icon-neutral-300-static: var(--primitive-color-gray-300);
  --icon-neutral-500: var(--primitive-color-gray-500);
  --icon-neutral-500-static: var(--primitive-color-gray-500);
  --icon-neutral-800: var(--primitive-color-gray-800);
  --icon-neutral-800-static: var(--primitive-color-gray-800);

  /* Icon / Brand */

  --icon-brand-500-static: var(--primitive-color-brand-500);
  /* Darker brand shade for text/icons on a light brand-50 surface, where
     brand-500 only reaches 4.04:1 (below WCAG AA 4.5:1). */
  --icon-brand-600: var(--primitive-color-brand-600);

  /* Icon / Status */

  --icon-status-negative: var(--primitive-color-negative-500);
  --icon-status-warning: var(--primitive-color-warning-500);
  --icon-status-positive: var(--primitive-color-positive-500);

  /* Border / Neutral */

  --border-neutral-100: var(--primitive-color-gray-100);
  --border-neutral-100-static: var(--primitive-color-gray-100);
  --border-neutral-200: var(--primitive-color-gray-200);
  --border-neutral-250: var(--primitive-color-gray-250);
  --border-neutral-300: var(--primitive-color-gray-300);
  --border-neutral-400: var(--primitive-color-gray-400);
  --border-neutral-500: var(--primitive-color-gray-500);

  /* Border / Brand */

  --border-brand-500: var(--primitive-color-brand-500);
  --border-brand-600: var(--primitive-color-brand-600);

  /* Border / Status */

  --border-status-negative: var(--primitive-color-negative-500);
  --border-status-negative-static: var(--primitive-color-negative-500);
  --border-status-warning: var(--primitive-color-warning-500);
  --border-status-warning-static: var(--primitive-color-warning-500);
  --border-status-positive-static: var(--primitive-color-positive-500);
  --border-status-focus: var(--primitive-color-focus-500);

  /* Text / Body */

  --text-body-0-static: var(--primitive-color-gray-0);
  --text-body-50-static: var(--primitive-color-gray-50);
  --text-body-300-tertiary: var(--primitive-color-gray-300);
  --text-body-300-tertiary-static: var(--primitive-color-gray-300);
  --text-body-400: var(--primitive-color-gray-400);
  --text-body-500-secondary: var(--primitive-color-gray-500);
  --text-body-500-secondary-static: var(--primitive-color-gray-500);
  --text-body-800-primary: var(--primitive-color-gray-800);
  --text-body-800-primary-static: var(--primitive-color-gray-800);

  /* Text / Link */

  --text-link-hover: var(--primitive-color-brand-300);
  --text-link-default: var(--primitive-color-brand-500);
  --text-link-visited: var(--primitive-color-gray-700);
  --text-link-disabled: var(--primitive-color-gray-500);

  /* Text / Accent */

  --text-accent-brand: var(--primitive-color-brand-500);
  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);

  /* Text / Status */

  --text-status-negative: var(--primitive-color-negative-500);
  --text-status-warning: var(--primitive-color-warning-500);
  --text-status-positive: var(--primitive-color-positive-500);
}
[data-incode-theme='dark'] {
  color-scheme: dark;

  /* Surface / Neutral */

  --surface-neutral-0: var(--primitive-color-gray-1000);
  --surface-neutral-0-static: var(--primitive-color-gray-0);
  --surface-neutral-0-80: var(--primitive-color-gray-900-80);
  --surface-neutral-50: var(--primitive-color-gray-900);
  --surface-neutral-100: var(--primitive-color-gray-800);
  --surface-neutral-100-static: var(--primitive-color-gray-100);
  --surface-neutral-150: var(--primitive-color-gray-750);
  --surface-neutral-200: var(--primitive-color-gray-700);
  --surface-neutral-200-static: var(--primitive-color-gray-200);
  --surface-neutral-250: var(--primitive-color-gray-600);
  --surface-neutral-300: var(--primitive-color-gray-500);
  --surface-neutral-400: var(--primitive-color-gray-500);
  --surface-neutral-500: var(--primitive-color-gray-300);
  --surface-neutral-600: var(--primitive-color-gray-250);
  --surface-neutral-600-static: var(--primitive-color-gray-600);
  --surface-neutral-700: var(--primitive-color-gray-200);
  --surface-neutral-750: var(--primitive-color-gray-150);
  --surface-neutral-800: var(--primitive-color-gray-100);
  --surface-neutral-900: var(--primitive-color-gray-0);
  --surface-neutral-900-80: var(--primitive-color-gray-0-80);
  --surface-neutral-900-static: var(--primitive-color-gray-900);
  --surface-neutral-900-80-static: var(--primitive-color-gray-0-80);
  --surface-neutral-1000: var(--primitive-color-gray-0);
  --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);

  /* Surface / Brand */

  --surface-brand-50: var(--primitive-color-brand-900);
  --surface-brand-100: var(--primitive-color-brand-900);
  --surface-brand-400-static: var(--primitive-color-brand-400);
  --surface-brand-500: var(--primitive-color-gray-0);
  --surface-brand-500-static: var(--primitive-color-brand-500);
  --surface-brand-600-static: var(--primitive-color-brand-600);
  --surface-brand-900-static: var(--primitive-color-brand-900);

  /* Surface / Status */

  --surface-status-negative-50: var(--primitive-color-negative-950);
  --surface-status-negative-500: var(--primitive-color-negative-500);

  --surface-status-warning-50: var(--primitive-color-warning-950);
  --surface-status-warning-500: var(--primitive-color-warning-400);

  --surface-status-positive-50: var(--primitive-color-positive-950);
  --surface-status-positive-500: var(--primitive-color-positive-400);

  /* Icon / Neutral */

  --icon-neutral-0: var(--primitive-color-gray-800);
  --icon-neutral-0-static: var(--primitive-color-gray-0);
  --icon-neutral-50-static: var(--primitive-color-gray-50);
  --icon-neutral-300: var(--primitive-color-gray-500);
  --icon-neutral-300-static: var(--primitive-color-gray-300);
  --icon-neutral-500: var(--primitive-color-gray-300);
  --icon-neutral-500-static: var(--primitive-color-gray-500);
  --icon-neutral-800: var(--primitive-color-gray-100);
  --icon-neutral-800-static: var(--primitive-color-gray-800);

  /* Icon / Brand */

  --icon-brand-500-static: var(--primitive-color-brand-500);
  /* In dark theme the brand-50 surface maps to dark navy (brand-900), so the
     accessible "brand-600 text" role uses a lighter shade for AA contrast. */
  --icon-brand-600: var(--primitive-color-brand-300);

  /* Icon / Status */

  --icon-status-negative: var(--primitive-color-negative-400);
  --icon-status-warning: var(--primitive-color-warning-400);
  --icon-status-positive: var(--primitive-color-positive-400);

  /* Border / Neutral */

  --border-neutral-100: var(--primitive-color-gray-700);
  --border-neutral-100-static: var(--primitive-color-gray-100);
  --border-neutral-200: var(--primitive-color-gray-600);
  --border-neutral-250: var(--primitive-color-gray-600);
  --border-neutral-300: var(--primitive-color-gray-500);
  --border-neutral-400: var(--primitive-color-gray-500);
  --border-neutral-500: var(--primitive-color-gray-300);

  /* Border / Brand */

  --border-brand-500: var(--primitive-color-brand-500);
  --border-brand-600: var(--primitive-color-brand-400);

  /* Border / Status */

  --border-status-negative: var(--primitive-color-negative-400);
  --border-status-negative-static: var(--primitive-color-negative-500);
  --border-status-warning: var(--primitive-color-warning-400);
  --border-status-warning-static: var(--primitive-color-warning-500);
  --border-status-focus: var(--primitive-color-focus-400);
  --border-status-focus-static: var(--primitive-color-focus-400);

  /* Text / Body */

  --text-body-0-static: var(--primitive-color-gray-0);
  --text-body-50-static: var(--primitive-color-gray-50);
  --text-body-300-tertiary: var(--primitive-color-gray-500);
  --text-body-300-tertiary-static: var(--primitive-color-gray-300);
  --text-body-400: var(--primitive-color-gray-500);
  --text-body-500-secondary: var(--primitive-color-gray-300);
  --text-body-500-secondary-static: var(--primitive-color-gray-500);
  --text-body-800-primary: var(--primitive-color-gray-50);
  --text-body-800-primary-static: var(--primitive-color-gray-800);

  /* Text / Link */

  --text-link-hover: var(--primitive-color-brand-300);
  --text-link-default: var(--primitive-color-brand-400);
  --text-link-visited: var(--primitive-color-gray-300);
  --text-link-disabled: var(--primitive-color-gray-500);

  /* Text / Accent */

  --text-accent-brand: var(--primitive-color-brand-500);
  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);

  /* Text / Status */

  --text-status-negative: var(--primitive-color-negative-400);
  --text-status-warning: var(--primitive-color-warning-400);
  --text-status-positive: var(--primitive-color-positive-500);
}
:root,
:host {
  /* Button / Primary */
  --button-primary-surface-default: var(--surface-brand-500-static);
  --button-primary-surface-hover: var(--surface-brand-400-static);
  --button-primary-surface-pressed: var(--surface-brand-600-static);
  --button-primary-surface-disabled: var(--surface-neutral-100);

  --button-primary-text-default: var(--text-body-0-static);
  --button-primary-text-disabled: var(--text-body-500-secondary);

  --button-primary-border-default: var(--surface-brand-500-static);
  --button-primary-border-hover: var(--surface-brand-400-static);
  --button-primary-border-pressed: var(--surface-brand-600-static);
  --button-primary-border-disabled: var(--surface-neutral-100);
  --button-primary-border-radius: var(--border-radius-medium);

  /* Button / Secondary */
  --button-secondary-text-default: var(--text-accent-brand);
  --button-secondary-text-disabled: var(--text-body-500-secondary);

  --button-secondary-border-default: var(--surface-brand-500-static);
  --button-secondary-border-hover: var(--surface-brand-400-static);
  --button-secondary-border-pressed: var(--surface-brand-600-static);
  --button-secondary-border-disabled: var(--surface-neutral-100);
  --button-secondary-border-radius: var(--border-radius-medium);
  --button-secondary-border-width: var(--border-width-medium);

  /* Button / Tertiary */
  --button-tertiary-text-default: var(--text-accent-brand);
  --button-tertiary-text-disabled: var(--text-body-500-secondary);

  /* Checkbox */
  --checkbox-surface-default: var(--surface-neutral-50);
  --checkbox-surface-selected: var(--surface-brand-500-static);
  --checkbox-surface-disabled: var(--surface-neutral-400);

  --checkbox-border-default: var(--border-neutral-400);
  --checkbox-border-disabled: var(--border-neutral-400);
  --checkbox-border-negative: var(--border-status-negative);
  --checkbox-border-radius: var(--border-radius-small);

  --checkbox-icon-default: var(--surface-neutral-0-static);

  --checkbox-text-default: var(--text-body-800-primary);
  --checkbox-text-disabled: var(--text-body-500-secondary);
  --checkbox-text-negative: var(--text-status-negative);

  /* Radio Button */
  --radio-button-surface-default: var(--surface-neutral-50);
  --radio-button-surface-selected: var(--surface-brand-500-static);
  --radio-button-surface-disabled: var(--surface-neutral-400);

  --radio-button-border-radius: var(--border-radius-full);
  --radio-button-border-default: var(--border-neutral-400);
  --radio-button-border-disabled: var(--border-neutral-400);
  --radio-button-border-negative: var(--border-status-negative);

  --radio-button-icon-default: var(--surface-neutral-0-static);

  --radio-button-text-default: var(--text-body-800-primary);
  --radio-button-text-disabled: var(--text-body-500-secondary);
  --radio-button-text-negative: var(--text-status-negative);

  /* Card */
  --card-surface-primary: var(--surface-neutral-800);

  --card-text-title: var(--surface-neutral-100);
  --card-text-subtitle: var(--text-body-500-secondary);

  /* Countdown */
  --countdown-surface-default: var(--surface-neutral-900-static);

  --countdown-text-default: var(--text-body-0-static);

  /* Input */
  --input-surface-default: var(--surface-neutral-50);
  --input-surface-focused: var(--surface-neutral-50);
  --input-surface-disabled: var(--surface-neutral-100);
  --input-surface-negative: var(--surface-neutral-50);
  --input-surface-hover: var(--surface-neutral-0);

  --input-border-default: var(--border-neutral-400);
  --input-border-disabled: var(--border-neutral-100);
  --input-border-negative: var(--border-status-negative);
  --input-border-focused: var(--border-status-focus);

  --input-icon-neutral: var(--icon-neutral-300);
  --input-icon-positive: var(--icon-status-positive);
  --input-icon-negative: var(--icon-status-negative);
  --input-icon-warning: var(--icon-status-warning);

  --input-text-label-default: var(--text-body-800-primary);

  --input-text-field-default: var(--text-body-800-primary);
  --input-text-field-disabled: var(--text-body-400);
  --input-text-field-placeholder: var(--text-body-500-secondary);

  --input-text-helper-default: var(--text-body-800-primary);
  --input-text-helper-negative: var(--text-status-negative);

  /* Dropdown */

  --dropdown-surface-default: var(--surface-neutral-50);
  --dropdown-surface-focused: var(--surface-neutral-50);
  --dropdown-surface-disabled: var(--surface-neutral-50);
  --dropdown-surface-negative: var(--surface-neutral-50);
  --dropdown-surface-selected: var(--surface-neutral-100);
  --dropdown-surface-hover: var(--surface-neutral-0);

  --dropdown-border-default: var(--border-neutral-400);
  --dropdown-border-disabled: var(--border-neutral-100);
  --dropdown-border-negative: var(--border-status-negative);
  --dropdown-border-focused: var(--border-status-focus);

  --dropdown-icon-neutral: var(--icon-neutral-300);
  --dropdown-icon-positive: var(--icon-status-positive);
  --dropdown-icon-negative: var(--icon-status-negative);
  --dropdown-icon-warning: var(--icon-status-warning);

  --dropdown-text-label-default: var(--text-body-800-primary);

  --dropdown-text-input-default: var(--text-body-800-primary);
  --dropdown-text-input-disabled: var(--text-body-400);
  --dropdown-text-input-placeholder: var(--text-body-500-secondary);

  --dropdown-text-helper-default: var(--text-body-800-primary);
  --dropdown-text-helper-negative: var(--text-status-negative);

  /* Link */

  --link-default: var(--text-link-default);
  --link-hover: var(--text-body-800-primary);
  --link-disabled: var(--text-body-500-secondary);
  --link-visited: var(--text-link-default);

  /* Spinner */

  --spinner-surface-primary: var(--surface-brand-500-static);
  --spinner-surface-secondary: var(--surface-brand-50);

  --spinner-text-title: var(--text-body-800-primary);
  --spinner-text-subtitle: var(--text-body-500-secondary);

  /* Snackbar */

  --snackbar-surface-neutral: var(--surface-brand-50);
  --snackbar-surface-positive: var(--surface-status-positive-50);
  --snackbar-surface-warning: var(--surface-status-warning-50);
  --snackbar-surface-negative: var(--surface-status-negative-50);

  --snackbar-border-neutral: var(--border-brand-500);
  --snackbar-border-positive: var(--border-status-positive-static);
  --snackbar-border-warning: var(--border-status-warning);
  --snackbar-border-negative: var(--border-status-negative);

  --snackbar-icon-neutral: var(--icon-brand-500-static);
  --snackbar-icon-positive: var(--icon-status-positive);
  --snackbar-icon-negative: var(--icon-status-negative);
  --snackbar-icon-warning: var(--icon-status-warning);

  --snackbar-text-link: var(--link-default);
  --snackbar-text-positive: var(--text-status-positive);
  --snackbar-text-warning: var(--text-status-warning);
  --snackbar-text-negative: var(--text-status-negative);
  --snackbar-text-neutral: var(--text-body-800-primary);

  /* Toggle-switch */

  --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
  --toggle-switch-surface-primary-off: var(--surface-neutral-400);
  --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);

  --toggle-switch-surface-secondary-on: var(--surface-neutral-0-static);
  --toggle-switch-surface-secondary-off: var(--surface-neutral-0-static);
  --toggle-switch-surface-secondary-disabled: var(--surface-neutral-300);

  --toggle-switch-text-default: var(--text-body-800-primary);
  --toggle-switch-text-disabled: var(--text-body-500-secondary);
  --toggle-switch-text-negative: var(--text-status-negative);
  --toggle-switch-text-link: var(--text-link-default);

  /* Tooltip */
  --tooltip-text-neutral: var(--text-body-0-static);
  --tooltip-surface-neutral: var(--surface-neutral-900-static);

  /* Sheet */
  --sheet-icon-neutral: var(--icon-neutral-800);

  --sheet-item-default: var(--surface-neutral-0);

  --sheet-action-default: var(--text-body-800-primary);
  --sheet-action-disabled: var(--text-body-500-secondary);

  --sheet-surface-default: var(--surface-neutral-0);
}
/**
 * Non-token design values used as implementation fallbacks.
 *
 * These values are intentionally centralized so we can:
 * - avoid scattering hardcoded values across the codebase
 * - track repeated patterns that may deserve real design tokens
 * - distinguish product/export/runtime constants from design-system tokens
 *
 * If a value starts repeating across features or components,
 * consider promoting it to a proper design token.
 */
:root {
  /* spacing / sizes */
  --signature-canvas-height: 256px;
  --signature-canvas-max-width: 600px;
  --phone-input-country-code-width: 140px;
  --page-header-height: 44px;
  --incode-page-max-w: 800px;
  --incode-page-max-h: 840px;
  --incode-form-max-w: 420px;
  --incode-page-max-h-landscape: 726px;
  --dialog-content-max-width: 390px;
  --permissions-modal-title-max-width: calc(100% - (2 * var(--spacing-64)));
  --document-capture-pdf-preview-height: 160px;
  --document-capture-tutorial-illustration-width: 292px;
  --document-capture-review-header-height: 100px;
  --document-capture-review-empty-footer-height: 56px;
  --incode-curp-confirm-max-w: 340px;
  --age-verification-logo-height: 20px;
  --id-processing-image-blur-radius: 8px;

  /* segmented date input */
  --segmented-date-input-height: 56px;
  --segmented-date-input-icon-space: 44px;
  --segmented-date-input-mm-dd-width: 1.9em;
  --segmented-date-input-yyyy-width: 3.5em;

  /* radio button sizing */
  --radio-button-size: 28px;
  --radio-button-dot-size: 9px;
  --radio-button-label-gap: 10px;
  --radio-button-message-offset: 38px;

  /* focus outline */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;

  /* home module */
  --home-logo-container-max-width: 180px;
  --home-logo-max-height: 250px;

  /* snackbar */
  --snackbar-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  /* redirect-to-mobile */
  --redirect-card-max-width: 800px;
  --redirect-card-min-height: 100%;
  --redirect-options-height: 332px;
  --redirect-options-max-width: 752px;
  --redirect-tabs-max-width: 676px;
  --redirect-tab-description-max-width: 434px;
  --redirect-form-column-max-width: 326px;
  --redirect-phone-input-country-code-width: 130px;
  --redirect-qr-wrapper-border-radius: 21px;

  /* electronic signature */
  --electronic-signature-title-max-w: 600px;
  --electronic-signature-illustration-max-w: min(
    100cqw,
    calc(100cqh - 32px),
    297px
  );
  --electronic-signature-illustration-svg-w: 80%;
  --electronic-signature-illustration-svg-shift: 3%;
  --electronic-signature-doc-preview-max-h: 150px;
  --electronic-signature-doc-preview-radius: 6px;
  --electronic-signature-doc-row-h: 56px;
  --electronic-signature-doc-view-header-offset: calc(
    -1 * var(--page-header-height)
  );

  /* id capture */
  --id-capture-notification-animation-height: 130px;
  --id-capture-result-flash-duration: 750ms;
  --id-capture-result-crossfade-duration: 400ms;
  --id-capture-analyzing-title-fade-duration: 300ms;
  --id-capture-analyzing-title-fade-offset: 4px;

  /* camera overlay (see shared/cameraOverlay/cameraFrame.css) */
  --camera-frame-capture-result-flash-shadow: 0 0 50px 0
    var(--surface-neutral-0-static);

  /* digital ID upload */
  --digital-id-preview-w: 156px;
  --digital-id-preview-h: 221px;
  --digital-id-laser-h: 231px;
  --digital-id-laser-scale: 1.35;
  --digital-id-content-max-w: 342px;
  --digital-id-footer-min-h: 160px;
  --digital-id-illustration-max-h: 260px;
  --digital-id-tutorial-illustration-max-h: 280px;
  --digital-id-file-name-max-w: 200px;
  --digital-id-progress-bar-w: 164px;
  --digital-id-progress-bar-h: 8px;
  --video-selfie-mask-vignette-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
  --video-selfie-feedback-max-width: 80%;
  --video-selfie-stepper-height: 45px;
  --video-selfie-stepper-pill-height: 5px;
  --video-selfie-mask-z-index: 50;
  --video-selfie-chrome-z-index: 60;
  --video-selfie-id-flip-gap: 34px;
  --video-selfie-id-flip-animation-height: 138px;
  --video-selfie-id-flip-animation-width: 260px;
  --video-selfie-id-feedback-width: 264px;
  --video-selfie-id-feedback-max-width: calc(100% - var(--spacing-48));
  --video-selfie-id-processing-feedback-width: 200px;
  --video-selfie-id-processing-feedback-height: 172px;
  --video-selfie-voice-panel-border-width: 5px;
  --video-selfie-voice-processing-height: 314px;
  --video-selfie-voice-vignette-shadow: 0 0 0 99999px
    var(--surface-neutral-1000-80-static);
}
[data-incode-theme='dark'] {
  /* Surface / Neutral */

  --surface-neutral-0: var(--primitive-color-gray-1000);
  --surface-neutral-0-static: var(--primitive-color-gray-0);
  --surface-neutral-0-80: var(--primitive-color-gray-900-80);
  --surface-neutral-50: var(--primitive-color-gray-900);
  --surface-neutral-100: var(--primitive-color-gray-800);
  --surface-neutral-100-static: var(--primitive-color-gray-100);
  --surface-neutral-150: var(--primitive-color-gray-750);
  --surface-neutral-200: var(--primitive-color-gray-700);
  --surface-neutral-200-static: var(--primitive-color-gray-200);
  --surface-neutral-250: var(--primitive-color-gray-600);
  --surface-neutral-300: var(--primitive-color-gray-500);
  --surface-neutral-400: var(--primitive-color-gray-500);
  --surface-neutral-500: var(--primitive-color-gray-300);
  --surface-neutral-600: var(--primitive-color-gray-250);
  --surface-neutral-600-static: var(--primitive-color-gray-600);
  --surface-neutral-700: var(--primitive-color-gray-200);
  --surface-neutral-750: var(--primitive-color-gray-150);
  --surface-neutral-800: var(--primitive-color-gray-100);
  --surface-neutral-900: var(--primitive-color-gray-0);
  --surface-neutral-900-80: var(--primitive-color-gray-0-80);
  --surface-neutral-900-static: var(--primitive-color-gray-900);
  --surface-neutral-900-80-static: var(--primitive-color-gray-0-80);
  --surface-neutral-1000: var(--primitive-color-gray-0);
  --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);

  /* Surface / Brand */

  --surface-brand-50: var(--primitive-color-brand-900);
  --surface-brand-100: var(--primitive-color-brand-900);
  --surface-brand-400-static: var(--primitive-color-brand-400);
  --surface-brand-500: var(--primitive-color-gray-0);
  --surface-brand-500-static: var(--primitive-color-brand-500);
  --surface-brand-600-static: var(--primitive-color-brand-600);

  /* Surface / Status */

  --surface-status-negative-50: var(--primitive-color-negative-950);
  --surface-status-negative-500: var(--primitive-color-negative-500);

  --surface-status-warning-50: var(--primitive-color-warning-950);
  --surface-status-warning-500: var(--primitive-color-warning-400);

  --surface-status-positive-50: var(--primitive-color-positive-950);
  --surface-status-positive-500: var(--primitive-color-positive-400);

  /* Icon / Neutral */

  --icon-neutral-0: var(--primitive-color-gray-800);
  --icon-neutral-0-static: var(--primitive-color-gray-0);
  --icon-neutral-50-static: var(--primitive-color-gray-50);
  --icon-neutral-300: var(--primitive-color-gray-500);
  --icon-neutral-300-static: var(--primitive-color-gray-300);
  --icon-neutral-500: var(--primitive-color-gray-300);
  --icon-neutral-500-static: var(--primitive-color-gray-500);
  --icon-neutral-800: var(--primitive-color-gray-100);
  --icon-neutral-800-static: var(--primitive-color-gray-800);

  /* Icon / Brand */

  --icon-brand-500-static: var(--primitive-color-brand-500);

  /* Icon / Status */

  --icon-status-negative: var(--primitive-color-negative-400);
  --icon-status-warning: var(--primitive-color-warning-400);
  --icon-status-positive: var(--primitive-color-positive-400);

  /* Border / Neutral */

  --border-neutral-100: var(--primitive-color-gray-700);
  --border-neutral-100-static: var(--primitive-color-gray-100);
  --border-neutral-200: var(--primitive-color-gray-600);
  --border-neutral-250: var(--primitive-color-gray-600);
  --border-neutral-300: var(--primitive-color-gray-500);
  --border-neutral-400: var(--primitive-color-gray-500);
  --border-neutral-500: var(--primitive-color-gray-300);

  /* Border / Brand */

  --border-brand-500: var(--primitive-color-brand-500);
  --border-brand-600: var(--primitive-color-brand-400);

  /* Border / Status */

  --border-status-negative: var(--primitive-color-negative-400);
  --border-status-negative-static: var(--primitive-color-negative-500);
  --border-status-warning: var(--primitive-color-warning-400);
  --border-status-warning-static: var(--primitive-color-warning-500);
  --border-status-focus: var(--primitive-color-focus-400);
  --border-status-focus-static: var(--primitive-color-focus-400);

  /* Text / Body */

  --text-body-0-static: var(--primitive-color-gray-0);
  --text-body-300-tertiary: var(--primitive-color-gray-500);
  --text-body-300-tertiary-static: var(--primitive-color-gray-300);
  --text-body-400: var(--primitive-color-gray-500);
  --text-body-500-secondary: var(--primitive-color-gray-300);
  --text-body-500-secondary-static: var(--primitive-color-gray-500);
  --text-body-800-primary: var(--primitive-color-gray-50);
  --text-body-800-primary-static: var(--primitive-color-gray-800);

  /* Text / Link */

  --text-link-hover: var(--primitive-color-brand-300);
  --text-link-default: var(--primitive-color-brand-400);
  --text-link-visited: var(--primitive-color-gray-300);
  --text-link-disabled: var(--primitive-color-gray-500);

  /* Text / Accent */

  --text-accent-brand: var(--primitive-color-brand-500);
  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);

  /* Text / Status */

  --text-status-negative: var(--primitive-color-negative-400);
  --text-status-warning: var(--primitive-color-warning-400);
  --text-status-positive: var(--primitive-color-positive-500);
}