@incodetech/web 2.0.0 → 2.0.1

package/dist/themes/dark.css

@@ -0,0 +1,1347 @@
+: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-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 / 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);
+
+  /* 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-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-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);
+}
+: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-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-400);
+
+  --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-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-400);
+
+  --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;
+  --document-capture-pdf-preview-height: 160px;
+  --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-qr-wrapper-border-radius: 21px;
+
+  /* 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;
+}
+[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-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);
+}