:root {
  /* MarketSnack FlowBite V1.01 */

  /* PRIMITIVE COLOR TOKENS */

  /* Blueberry */
  --Colors-Blueberry-50: #ecf1fc;
  --Colors-Blueberry-100: #e5edff;
  --Colors-Blueberry-200: #b2c9ff;
  --Colors-Blueberry-300: #80a6ff;
  --Colors-Blueberry-400: #4d82ff;
  --Colors-Blueberry-500: #004dff;
  --Colors-Blueberry-600: #0044e3;
  --Colors-Blueberry-700: #0039be;
  --Colors-Blueberry-800: #002a8c;
  --Colors-Blueberry-900: #001d5f;
  --Colors-Blueberry-1000: #00123d;
  --Colors-Blueberry-1100: #00081a;

  /* Mint */
  --Colors-Mint-50: #f2fdf8;
  --Colors-Mint-100: #e9fcf4;
  --Colors-Mint-200: #bcf5dd;
  --Colors-Mint-300: #90efc6;
  --Colors-Mint-400: #64e8af;
  --Colors-Mint-500: #21de8c;
  --Colors-Mint-600: #1dc67d;
  --Colors-Mint-700: #1ab271;
  --Colors-Mint-800: #027844;
  --Colors-Mint-900: #004f2e;
  --Colors-Mint-1000: #00301c;
  --Colors-Mint-1100: #001a0f;

  /* Mango */
  --Colors-Mango-50: #fefcf5;
  --Colors-Mango-100: #fef8e7;
  --Colors-Mango-200: #fdddb1;
  --Colors-Mango-300: #f8c379;
  --Colors-Mango-400: #f5af45;
  --Colors-Mango-500: #e98c00;
  --Colors-Mango-600: #de7600;
  --Colors-Mango-700: #c66700;
  --Colors-Mango-800: #a44700;
  --Colors-Mango-900: #803305;
  --Colors-Mango-1000: #411700;
  --Colors-Mango-1100: #160800;

  /* Pink Latte */
  --Colors-Pink-Latte-50: #fdf7f9;
  --Colors-Pink-Latte-100: #fbeaee;
  --Colors-Pink-Latte-200: #f2c0cd;
  --Colors-Pink-Latte-300: #ea95aa;
  --Colors-Pink-Latte-400: #e16a88;
  --Colors-Pink-Latte-500: #d52a54;
  --Colors-Pink-Latte-600: #bf264d;
  --Colors-Pink-Latte-700: #a24;
  --Colors-Pink-Latte-800: #7f1a32;
  --Colors-Pink-Latte-900: #6a152b;
  --Colors-Pink-Latte-1000: #410413;
  --Colors-Pink-Latte-1100: #150409;

  /* Grape */
  --Colors-Grape-50: #f5f0ff;
  --Colors-Grape-100: #eee7ff;
  --Colors-Grape-200: #d1bffb;
  --Colors-Grape-300: #b79ef5;
  --Colors-Grape-400: #a279f1;
  --Colors-Grape-500: #8f5aef;
  --Colors-Grape-600: #713dd7;
  --Colors-Grape-700: #572db3;
  --Colors-Grape-800: #421e8d;
  --Colors-Grape-900: #30196c;
  --Colors-Grape-1000: #23114d;
  --Colors-Grape-1100: #180c38;

  /* Aloe */
  --Colors-Aloe-50: #f5fcff;
  --Colors-Aloe-100: #e8fcff;
  --Colors-Aloe-200: #a5eaf8;
  --Colors-Aloe-300: #66d5eb;
  --Colors-Aloe-400: #0ebfdb;
  --Colors-Aloe-500: #00b9d6;
  --Colors-Aloe-600: #00a3bf;
  --Colors-Aloe-700: #078eac;
  --Colors-Aloe-800: #00566d;
  --Colors-Aloe-900: #004359;
  --Colors-Aloe-1000: #002739;
  --Colors-Aloe-1100: #00131d;

  /* Salmon */
  --Colors-Salmon-50: #fff5f2;
  --Colors-Salmon-100: #ffe3dc;
  --Colors-Salmon-200: #ffbdaa;
  --Colors-Salmon-300: #ff8e72;
  --Colors-Salmon-400: #ff6040;
  --Colors-Salmon-500: #f9412c;
  --Colors-Salmon-600: #d53221;
  --Colors-Salmon-700: #b52b1d;
  --Colors-Salmon-800: #922418;
  --Colors-Salmon-900: #731d14;
  --Colors-Salmon-1000: #53160f;
  --Colors-Salmon-1100: #320d09;

  /* Neutral */
  --Colors-Neutral-50: #fff;
  --Colors-Neutral-100: #f9fafb;
  --Colors-Neutral-200: #eef0f1;
  --Colors-Neutral-300: #e3e5e8;
  --Colors-Neutral-400: #d5d9dd;
  --Colors-Neutral-500: #b9bfc6;
  --Colors-Neutral-600: #9ba4ad;
  --Colors-Neutral-700: #7c8894;
  --Colors-Neutral-800: #5b6570;
  --Colors-Neutral-900: #2f353a;
  --Colors-Neutral-1000: #1c1e20;
  --Colors-Neutral-1100: #000;

  /* COLOR TOKENS */

  /* Color/Theme Accent */
  --Theme-Color-50: var(--Colors-Blueberry-50);
  --Theme-Color-100: var(--Colors-Blueberry-100);
  --Theme-Color-200: var(--Colors-Blueberry-200);
  --Theme-Color-300: var(--Colors-Blueberry-300);
  --Theme-Color-400: var(--Colors-Blueberry-400);
  --Theme-Color-500: var(--Colors-Blueberry-500);
  --Theme-Color-600: var(--Colors-Blueberry-600);
  --Theme-Color-700: var(--Colors-Blueberry-700);
  --Theme-Color-800: var(--Colors-Blueberry-800);
  --Theme-Color-900: var(--Colors-Blueberry-900);
  --Theme-Color-1000: var(--Colors-Blueberry-1000);
  --Theme-Color-1100: var(--Colors-Blueberry-1100);

  &[data-theme="Blueberry"] {
    --Theme-Color-50: var(--Colors-Blueberry-50);
    --Theme-Color-100: var(--Colors-Blueberry-100);
    --Theme-Color-200: var(--Colors-Blueberry-200);
    --Theme-Color-300: var(--Colors-Blueberry-300);
    --Theme-Color-400: var(--Colors-Blueberry-400);
    --Theme-Color-500: var(--Colors-Blueberry-500);
    --Theme-Color-600: var(--Colors-Blueberry-600);
    --Theme-Color-700: var(--Colors-Blueberry-700);
    --Theme-Color-800: var(--Colors-Blueberry-800);
    --Theme-Color-900: var(--Colors-Blueberry-900);
    --Theme-Color-1000: var(--Colors-Blueberry-1000);
    --Theme-Color-1100: var(--Colors-Blueberry-1100);
  }

  &[data-theme="Aloe"] {
    --Theme-Color-50: var(--Colors-Aloe-50);
    --Theme-Color-100: var(--Colors-Aloe-100);
    --Theme-Color-200: var(--Colors-Aloe-200);
    --Theme-Color-300: var(--Colors-Aloe-300);
    --Theme-Color-400: var(--Colors-Aloe-400);
    --Theme-Color-500: var(--Colors-Aloe-500);
    --Theme-Color-600: var(--Colors-Aloe-600);
    --Theme-Color-700: var(--Colors-Aloe-700);
    --Theme-Color-800: var(--Colors-Aloe-800);
    --Theme-Color-900: var(--Colors-Aloe-900);
    --Theme-Color-1000: var(--Colors-Aloe-1000);
    --Theme-Color-1100: var(--Colors-Aloe-1100);
  }

  &[data-theme="Mango"] {
    --Theme-Color-50: var(--Colors-Mango-50);
    --Theme-Color-100: var(--Colors-Mango-100);
    --Theme-Color-200: var(--Colors-Mango-200);
    --Theme-Color-300: var(--Colors-Mango-300);
    --Theme-Color-400: var(--Colors-Mango-400);
    --Theme-Color-500: var(--Colors-Mango-500);
    --Theme-Color-600: var(--Colors-Mango-600);
    --Theme-Color-700: var(--Colors-Mango-700);
    --Theme-Color-800: var(--Colors-Mango-800);
    --Theme-Color-900: var(--Colors-Mango-900);
    --Theme-Color-1000: var(--Colors-Mango-1000);
    --Theme-Color-1100: var(--Colors-Mango-1100);
  }

  &[data-theme="Grape"] {
    --Theme-Color-50: var(--Colors-Grape-50);
    --Theme-Color-100: var(--Colors-Grape-100);
    --Theme-Color-200: var(--Colors-Grape-200);
    --Theme-Color-300: var(--Colors-Grape-300);
    --Theme-Color-400: var(--Colors-Grape-400);
    --Theme-Color-500: var(--Colors-Grape-500);
    --Theme-Color-600: var(--Colors-Grape-600);
    --Theme-Color-700: var(--Colors-Grape-700);
    --Theme-Color-800: var(--Colors-Grape-800);
    --Theme-Color-900: var(--Colors-Grape-900);
    --Theme-Color-1000: var(--Colors-Grape-1000);
    --Theme-Color-1100: var(--Colors-Grape-1100);
  }

  /* Color/Surface */
  --Surface-Primary: var(--Colors-Neutral-50);
  --Surface-Secondary: var(--Colors-Neutral-100);
  --Surface-Tertiary: var(--Colors-Neutral-200);
  --Surface-Hover: var(--Theme-Color-50);
  --Surface-Primary-Inverted: var(--Colors-Neutral-1100);
  --Surface-Secondary-Inverted: var(--Colors-Neutral-1000);
  --Surface-Hover-Inverted: var(--Theme-Color-1000);
  --Surface-Primary-Opacity: rgb(255 255 255 / 0%);

  &[data-mode="dark"] {
    --Surface-Primary: var(--Colors-Neutral-1100);
    --Surface-Secondary: var(--Colors-Neutral-1000);
    --Surface-Tertiary: var(--Colors-Neutral-900);
    --Surface-Hover: var(--Colors-Neutral-1000);
    --Surface-Primary-Inverted: var(--Colors-Neutral-50);
    --Surface-Secondary-Inverted: var(--Colors-Neutral-100);
    --Surface-Hover-Inverted: var(--Theme-Color-50);
    --Surface-Primary-Opacity: rgb(0 0 0 / 0%);
  }

  /* Color/Stroke */
  --Stroke-Primary: var(--Colors-Neutral-400);
  --Stroke-Secondary: var(--Colors-Neutral-200);
  --Stroke-Primary-Inverted: var(--Colors-Neutral-1000);
  --Stroke-Secondary-Inverted: var(--Colors-Neutral-900);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Stroke-Primary: var(--Colors-Neutral-900);
    --Stroke-Secondary: var(--Colors-Neutral-1000);
    --Stroke-Primary-Inverted: var(--Colors-Neutral-100);
    --Stroke-Secondary-Inverted: var(--Colors-Neutral-200);
  }

  /* Color/Text */
  --Text-Primary: var(--Colors-Neutral-1100);
  --Text-Secondary: var(--Colors-Neutral-900);
  --Text-Tertiary: var(--Colors-Neutral-700);
  --Text-Primary-Inverted: var(--Colors-Neutral-50);
  --Text-Secondary-Inverted: var(--Colors-Neutral-200);
  --Text-Tertiary-Inverted: var(--Colors-Neutral-400);
  --Text-Highlight-Theme: var(--Theme-Color-600);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Text-Primary: var(--Colors-Neutral-200);
    --Text-Secondary: var(--Colors-Neutral-400);
    --Text-Tertiary: var(--Colors-Neutral-600);
    --Text-Primary-Inverted: var(--Colors-Neutral-1100);
    --Text-Secondary-Inverted: var(--Colors-Neutral-900);
    --Text-Tertiary-Inverted: var(--Colors-Neutral-700);
    --Text-Highlight-Theme: var(--Theme-Color-300);
  }

  /* Color/Link/Buttons */
  --Link-Buttons-Rest: var(--Theme-Color-600);
  --Link-Buttons-Hover: var(--Theme-Color-400);
  --Link-Buttons-Pressed: var(--Theme-Color-800);
  --Link-Buttons-Hover-Tertiary: var(--Theme-Color-100);
  --Link-Buttons-Rest-Subtle: var(--Colors-Neutral-800);
  --Link-Buttons-Enable: var(--Colors-Neutral-50);
  --Link-Buttons-Disable-Text: var(--Colors-Neutral-400);
  --Link-Buttons-Disable-Surface: var(--Colors-Neutral-100);
  --Link-Buttons-Rest-Destructive: var(--Colors-Pink-Latte-700);
  --Link-Buttons-Hover-Destructive: var(--Colors-Pink-Latte-500);
  --Link-Buttons-Hover-Tertiary-Destructive: var(--Colors-Pink-Latte-100);
  --Link-Buttons-Pressed-Destructive: var(--Colors-Pink-Latte-800);
  --Link-Buttons-Destructive-Subtle: var(--Colors-Pink-Latte-700);
  --Shadow-Color: rgb(0 0 0 / 10%);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Shadow-Color: rgb(255 255 255 / 10%);
  }

  /* TODO: migrate all components that use them */
  --Link-Buttons-Surface-Rest: var(--Theme-Color-600);
  --Link-Buttons-Surface-Hover: var(--Theme-Color-400);
  --Link-Buttons-Surface-Pressed: var(--Theme-Color-800);
  --Link-Buttons-Surface-Disable: var(--Colors-Neutral-100);
  --Link-Buttons-Surface-Destructive: var(--Colors-Pink-Latte-700);
  --Link-Buttons-Surface-Destructive-Hover: var(--Colors-Pink-Latte-500);
  --Link-Buttons-Surface-Destructive-Hover-Pressed: var(
    --Colors-Pink-Latte-800
  );
  --Link-Buttons-Text-Rest: var(--Colors-Neutral-800);
  --Link-Buttons-Text-Enable: var(--Colors-Neutral-50);
  --Link-Buttons-Text-Disable: var(--Colors-Neutral-500);
  --Link-Buttons-Text-Destructive: var(--Colors-Pink-Latte-700);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Link-Buttons-Rest: var(--Theme-Color-300);
    --Link-Buttons-Hover: var(--Theme-Color-200);
    --Link-Buttons-Pressed: var(--Theme-Color-400);
    --Link-Buttons-Hover-Tertiary: var(--Theme-Color-1000);
    --Link-Buttons-Rest-Subtle: var(--Colors-Neutral-200);
    --Link-Buttons-Enable: var(--Colors-Neutral-1100);
    --Link-Buttons-Disable-Text: var(--Colors-Neutral-900);
    --Link-Buttons-Disable-Surface: var(--Colors-Neutral-1000);
    --Link-Buttons-Rest-Destructive: var(--Colors-Pink-Latte-300);
    --Link-Buttons-Hover-Destructive: var(--Colors-Pink-Latte-200);
    --Link-Buttons-Hover-Tertiary-Destructive: var(--Colors-Pink-Latte-1000);
    --Link-Buttons-Pressed-Destructive: var(--Colors-Pink-Latte-400);
    --Link-Buttons-Destructive-Subtle: var(--Colors-Pink-Latte-300);
    --Link-Buttons-Surface-Rest: var(--Theme-Color-300);
    --Link-Buttons-Surface-Hover: var(--Theme-Color-200);
    --Link-Buttons-Surface-Pressed: var(--Theme-Color-400);
    --Link-Buttons-Surface-Disable: var(--Colors-Neutral-1000);
    --Link-Buttons-Surface-Destructive: var(--Colors-Pink-Latte-400);
    --Link-Buttons-Surface-Destructive-Hover: var(--Colors-Pink-Latte-300);
    --Link-Buttons-Surface-Destructive-Hover-Pressed: var(
      --Colors-Pink-Latte-400
    );
    --Link-Buttons-Text-Rest: var(--Colors-Neutral-50);
    --Link-Buttons-Text-Enable: var(--Colors-Neutral-900);
    --Link-Buttons-Text-Disable: var(--Colors-Neutral-800);
    --Link-Buttons-Text-Destructive: var(--Colors-Pink-Latte-300);
  }

  /* Color/Link/Segmented Controls */
  --Link-Segmented-Controls-Rest: var(--Theme-Color-50);
  --Link-Segmented-Controls-Hover: var(--Theme-Color-100);
  --Link-Segmented-Controls-Rest-Text: var(--Theme-Color-500);
  --Link-Segmented-Controls-Active: var(--Theme-Color-600);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Link-Segmented-Controls-Rest: var(--Colors-Neutral-1000);
    --Link-Segmented-Controls-Hover: var(--Colors-Neutral-900);
    --Link-Segmented-Controls-Rest-Text: var(--Theme-Color-200);
    --Link-Segmented-Controls-Active: var(--Theme-Color-200);
  }

  /* Color/Link/Segmented Timerange */
  --Link-Segmented-Timerange-Rest-Surface: var(--Colors-Neutral-50);
  --Link-Segmented-Timerange-Rest-Text: var(--Colors-Neutral-700);
  --Link-Segmented-Timerange-Hover-Surface: var(--Colors-Neutral-200);
  --Link-Segmented-Timerange-Hover-Text: var(--Colors-Neutral-900);
  --Link-Segmented-Timerange-Active-Surface-Positive: var(--Colors-Mint-100);
  --Link-Segmented-Timerange-Active-Text-Positive: var(--Colors-Mint-800);
  --Link-Segmented-Timerange-Active-Surface-Negative: var(
    --Colors-Pink-Latte-100
  );
  --Link-Segmented-Timerange-Active-Text-Negative: var(--Colors-Pink-Latte-700);
  --Link-Segmented-Timerange-Active-Surface-Neutral: var(--Colors-Neutral-200);
  --Link-Segmented-Timerange-Active-Text-Neutral: var(--Colors-Neutral-800);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Link-Segmented-Timerange-Rest-Surface: var(--Colors-Neutral-1100);
    --Link-Segmented-Timerange-Rest-Text: var(--Colors-Neutral-400);
    --Link-Segmented-Timerange-Hover-Surface: var(--Colors-Neutral-900);
    --Link-Segmented-Timerange-Hover-Text: var(--Colors-Neutral-200);
    --Link-Segmented-Timerange-Active-Surface-Positive: var(--Colors-Mint-1000);
    --Link-Segmented-Timerange-Active-Text-Positive: var(--Colors-Mint-300);
    --Link-Segmented-Timerange-Active-Surface-Negative: var(
      --Colors-Pink-Latte-1000
    );
    --Link-Segmented-Timerange-Active-Text-Negative: var(
      --Colors-Pink-Latte-300
    );
    --Link-Segmented-Timerange-Active-Surface-Neutral: var(
      --Colors-Neutral-900
    );
    --Link-Segmented-Timerange-Active-Text-Neutral: var(--Colors-Neutral-400);
  }

  /* Color/Link/Inverted Buttons */
  --Link-Inverted-Buttons-Surface-Rest: var(--Theme-Color-300);
  --Link-Inverted-Buttons-Surface-Hover: var(--Theme-Color-200);
  --Link-Inverted-Buttons-Surface-Pressed: var(--Theme-Color-400);
  --Link-Inverted-Buttons-Surface-Disable: var(--Colors-Neutral-1000);
  --Link-Inverted-Buttons-Text-Rest: var(--Colors-Neutral-50);
  --Link-Inverted-Buttons-Text-Enable: var(--Colors-Neutral-900);
  --Link-Inverted-Buttons-Text-Disable: var(--Colors-Neutral-800);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Link-Inverted-Buttons-Surface-Rest: var(--Theme-Color-600);
    --Link-Inverted-Buttons-Surface-Hover: var(--Theme-Color-400);
    --Link-Inverted-Buttons-Surface-Pressed: var(--Theme-Color-800);
    --Link-Inverted-Buttons-Surface-Disable: var(--Colors-Neutral-100);
    --Link-Inverted-Buttons-Text-Rest: var(--Colors-Neutral-800);
    --Link-Inverted-Buttons-Text-Enable: var(--Colors-Neutral-50);
    --Link-Inverted-Buttons-Text-Disable: var(--Colors-Neutral-500);
  }

  /* Color/Link/Breadcrumb */
  --Link-Breadcrumb-Rest: var(--Colors-Neutral-800);
  --Link-Breadcrumb-Hover: var(--Theme-Color-400);
  --Link-Breadcrumb-Active: var(--Theme-Color-600);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Link-Breadcrumb-Rest: var(--Colors-Neutral-400);
    --Link-Breadcrumb-Hover: var(--Theme-Color-200);
    --Link-Breadcrumb-Active: var(--Theme-Color-400);
  }

  /* Color/Alerts */
  --Alerts-Notification-Surface: var(--Colors-Blueberry-100);
  --Alerts-Notification-Text: var(--Colors-Blueberry-700);
  --Alerts-Notification-Icon: var(--Colors-Blueberry-200);
  --Alerts-Sucess-Surface: var(--Colors-Mint-100);
  --Alerts-Sucess-Text: var(--Colors-Mint-1000);
  --Alerts-Error-Surface: var(--Colors-Pink-Latte-100);
  --Alerts-Error-Text: var(--Colors-Pink-Latte-700);
  --Alerts-Warning-Surface: var(--Colors-Mango-100);
  --Alerts-Warning-Text: var(--Colors-Mango-700);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Alerts-Notification-Surface: var(--Colors-Blueberry-1000);
    --Alerts-Notification-Text: var(--Colors-Blueberry-300);
    --Alerts-Notification-Icon: var(--Colors-Blueberry-700);
    --Alerts-Sucess-Surface: var(--Colors-Mint-1000);
    --Alerts-Sucess-Text: var(--Colors-Mint-300);
    --Alerts-Error-Surface: var(--Colors-Pink-Latte-1000);
    --Alerts-Error-Text: var(--Colors-Pink-Latte-300);
    --Alerts-Warning-Surface: var(--Colors-Mango-1000);
    --Alerts-Warning-Text: var(--Colors-Mango-300);
  }

  /* Color/Input */
  --Input-Stroke-Pressed: var(--Theme-Color-800);
  --Input-Stroke-Rest: var(--Colors-Neutral-400);
  --Input-Stroke-Hover: var(--Theme-Color-500);
  --Input-Stroke-Focus: var(--Theme-Color-700);
  --Input-Stroke-Disable: var(--Colors-Neutral-500);
  --Input-Stroke-Error: var(--Colors-Pink-Latte-700);
  --Input-Stroke-Success: var(--Colors-Mint-800);
  --Input-Surface-Default: var(--Colors-Neutral-50);
  --Input-Surface-Disable: var(--Colors-Neutral-100);
  --Input-Surface-Error: var(--Colors-Pink-Latte-100);
  --Input-Text-Label: var(--Colors-Neutral-700);
  --Input-Text-Hover: var(--Theme-Color-400);
  --Input-Text-Focus: var(--Colors-Neutral-1100);
  --Input-Text-Disable: var(--Colors-Neutral-700);
  --Input-Text-Success: var(--Colors-Mint-800);
  --Input-Text-Error: var(--Colors-Pink-Latte-700);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Input-Stroke-Pressed: var(--Theme-Color-700);
    --Input-Stroke-Rest: var(--Colors-Neutral-600);
    --Input-Stroke-Hover: var(--Theme-Color-300);
    --Input-Stroke-Focus: var(--Theme-Color-200);
    --Input-Stroke-Disable: var(--Colors-Neutral-900);
    --Input-Stroke-Error: var(--Colors-Pink-Latte-300);
    --Input-Stroke-Success: var(--Colors-Mint-300);
    --Input-Surface-Default: var(--Colors-Neutral-1100);
    --Input-Surface-Disable: var(--Colors-Neutral-1000);
    --Input-Surface-Error: var(--Colors-Pink-Latte-800);
    --Input-Text-Label: var(--Colors-Neutral-600);
    --Input-Text-Hover: var(--Theme-Color-300);
    --Input-Text-Focus: var(--Colors-Neutral-200);
    --Input-Text-Disable: var(--Colors-Neutral-800);
    --Input-Text-Success: var(--Colors-Mint-300);
    --Input-Text-Error: var(--Colors-Pink-Latte-300);
  }

  /* Color/Badges */
  --Badges-Surface-Positive: var(--Colors-Mint-100);
  --Badges-Surface-Negative: var(--Colors-Pink-Latte-100);
  --Badges-Surface-Blueberry-Tint: var(--Colors-Blueberry-100);
  --Badges-Surface-Blueberry-Bold: var(--Colors-Blueberry-200);
  --Badges-Surface-Mint-Tint: var(--Colors-Mint-100);
  --Badges-Surface-Mint-Bold: var(--Colors-Mint-200);
  --Badges-Surface-Mango-Tint: var(--Colors-Mango-100);
  --Badges-Surface-Mango-Bold: var(--Colors-Mango-200);
  --Badges-Surface-Pinklatte-Tint: var(--Colors-Pink-Latte-100);
  --Badges-Surface-Pinklatte-Bold: var(--Colors-Pink-Latte-200);
  --Badges-Surface-Grape-Tint: var(--Colors-Grape-100);
  --Badges-Surface-Grape-Bold: var(--Colors-Grape-200);
  --Badges-Surface-Aloe-Tint: var(--Colors-Aloe-100);
  --Badges-Surface-Aloe-Bold: var(--Colors-Aloe-200);
  --Badges-Surface-Salmon-Tint: var(--Colors-Salmon-100);
  --Badges-Surface-Salmon-Bold: var(--Colors-Salmon-200);
  --Badges-Surface-Neutral-Tint: var(--Colors-Neutral-200);
  --Badges-Surface-Neutral-Bold: var(--Colors-Neutral-300);
  --Badges-Surface-Gold: var(--Colors-Mango-200);
  --Badges-Surface-Gold2: var(--Colors-Mango-500);
  --Badges-Surface-Theme: var(--Theme-Color-100);
  --Badges-Content-Positive: var(--Colors-Mint-800);
  --Badges-Content-Negative: var(--Colors-Pink-Latte-700);
  --Badges-Content-Blueberry: var(--Colors-Blueberry-700);
  --Badges-Content-Mint: var(--Colors-Mint-800);
  --Badges-Content-Mango: var(--Colors-Mango-800);
  --Badges-Content-Pinklatte: var(--Colors-Pink-Latte-800);
  --Badges-Content-Grape: var(--Colors-Grape-700);
  --Badges-Content-Aloe: var(--Colors-Aloe-800);
  --Badges-Content-Salmon: var(--Colors-Salmon-800);
  --Badges-Content-Neutral: var(--Colors-Neutral-900);
  --Badges-Content-Gold: var(--Colors-Mango-1000);
  --Badges-Content-Theme: var(--Theme-Color-900);
  --Badges-Highlight-Positive: var(--Colors-Mint-600);
  --Badges-Highlight-Negative: var(--Colors-Pink-Latte-600);
  --Badges-Highlight-Neutral-Bold: var(--Colors-Neutral-300);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Badges-Surface-Positive: var(--Colors-Mint-1000);
    --Badges-Surface-Negative: var(--Colors-Pink-Latte-900);
    --Badges-Surface-Blueberry-Tint: var(--Colors-Blueberry-800);
    --Badges-Surface-Blueberry-Bold: var(--Colors-Blueberry-600);
    --Badges-Surface-Mint-Tint: var(--Colors-Mint-1000);
    --Badges-Surface-Mint-Bold: var(--Colors-Mint-800);
    --Badges-Surface-Mango-Tint: var(--Colors-Mango-1000);
    --Badges-Surface-Mango-Bold: var(--Colors-Mango-800);
    --Badges-Surface-Pinklatte-Tint: var(--Colors-Pink-Latte-1000);
    --Badges-Surface-Pinklatte-Bold: var(--Colors-Pink-Latte-800);
    --Badges-Surface-Grape-Tint: var(--Colors-Grape-1000);
    --Badges-Surface-Grape-Bold: var(--Colors-Grape-800);
    --Badges-Surface-Aloe-Tint: var(--Colors-Aloe-1000);
    --Badges-Surface-Aloe-Bold: var(--Colors-Aloe-800);
    --Badges-Surface-Salmon-Tint: var(--Colors-Salmon-1000);
    --Badges-Surface-Salmon-Bold: var(--Colors-Salmon-800);
    --Badges-Surface-Neutral-Tint: var(--Colors-Neutral-1000);
    --Badges-Surface-Neutral-Bold: var(--Colors-Neutral-800);
    --Badges-Surface-Gold: var(--Colors-Mango-1000);
    --Badges-Surface-Gold2: var(--Colors-Mango-700);
    --Badges-Surface-Theme: var(--Theme-Color-900);
    --Badges-Content-Positive: var(--Colors-Mint-300);
    --Badges-Content-Negative: var(--Colors-Pink-Latte-300);
    --Badges-Content-Blueberry: var(--Colors-Blueberry-100);
    --Badges-Content-Mint: var(--Colors-Mint-100);
    --Badges-Content-Mango: var(--Colors-Mango-100);
    --Badges-Content-Pinklatte: var(--Colors-Pink-Latte-100);
    --Badges-Content-Grape: var(--Colors-Grape-100);
    --Badges-Content-Aloe: var(--Colors-Aloe-100);
    --Badges-Content-Salmon: var(--Colors-Salmon-100);
    --Badges-Content-Neutral: var(--Colors-Neutral-200);
    --Badges-Content-Gold: var(--Colors-Mango-50);
    --Badges-Content-Theme: var(--Theme-Color-100);
    --Badges-Highlight-Positive: var(--Colors-Mint-500);
    --Badges-Highlight-Negative: var(--Colors-Pink-Latte-500);
    --Badges-Highlight-Neutral-Bold: var(--Colors-Neutral-800);
  }

  /* Charts */
  --Charts-Shades-1: var(--Theme-Color-50);
  --Charts-Shades-2: var(--Theme-Color-200);
  --Charts-Shades-3: var(--Theme-Color-300);
  --Charts-Shades-4: var(--Theme-Color-400);
  --Charts-Shades-5: var(--Theme-Color-600);
  --Charts-Shades-6: var(--Theme-Color-900);
  --Charts-Aloe-Tint: var(--Colors-Aloe-100);
  --Charts-Aloe-Bold: var(--Colors-Aloe-500);
  --Charts-Mint-Tint: var(--Colors-Mint-100);
  --Charts-Mint-Bold: var(--Colors-Mint-500);
  --Charts-Mango-Tint: var(--Colors-Mango-100);
  --Charts-Mango-Bold: var(--Colors-Mango-500);
  --Charts-Pinklatte-Tint: var(--Colors-Pink-Latte-100);
  --Charts-Pinklatte-Bold: var(--Colors-Pink-Latte-500);
  --Charts-Grape-Tint: var(--Colors-Grape-100);
  --Charts-Grape-Bold: var(--Colors-Grape-500);
  --Charts-Salmon-Tint: var(--Colors-Salmon-100);
  --Charts-Salmon-Bold: var(--Colors-Salmon-500);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Charts-Shades-1: var(--Theme-Color-900);
    --Charts-Shades-2: var(--Theme-Color-600);
    --Charts-Shades-3: var(--Theme-Color-400);
    --Charts-Shades-4: var(--Theme-Color-300);
    --Charts-Shades-5: var(--Theme-Color-200);
    --Charts-Shades-6: var(--Theme-Color-100);
    --Charts-Aloe-Tint: var(--Colors-Aloe-900);
    --Charts-Aloe-Bold: var(--Colors-Aloe-700);
    --Charts-Mint-Tint: var(--Colors-Mint-900);
    --Charts-Mint-Bold: var(--Colors-Mint-700);
    --Charts-Mango-Tint: var(--Colors-Mango-900);
    --Charts-Mango-Bold: var(--Colors-Mango-700);
    --Charts-Pinklatte-Tint: var(--Colors-Pink-Latte-900);
    --Charts-Pinklatte-Bold: var(--Colors-Pink-Latte-700);
    --Charts-Grape-Tint: var(--Colors-Grape-900);
    --Charts-Grape-Bold: var(--Colors-Grape-700);
    --Charts-Salmon-Tint: var(--Colors-Salmon-900);
    --Charts-Salmon-Bold: var(--Colors-Salmon-700);
  }

  /* Color/Chips */
  --Chips-Rest-Surface: var(--Colors-Neutral-50);
  --Chips-Rest-Selected-Surface: var(--Colors-Neutral-100);
  --Chips-Hover-Surface: var(--Colors-Neutral-100);
  --Chips-Selected-Surface: var(--Colors-Neutral-200);
  --Chips-Focus-Surface: var(--Colors-Neutral-200);
  --Chips-Focus-Selected-Surface: var(--Colors-Neutral-300);
  --Chips-Drag-Surface: var(--Colors-Neutral-300);
  --Chips-Drag-Selected-Surface: var(--Colors-Neutral-400);
  --Chips-Disable-Surface: var(--Colors-Neutral-100);
  --Chips-Drag-Shadow: var(--Colors-Neutral-600);
  --Chips-Stroke: var(--Colors-Neutral-300);
  --Chips-Stroke-Rest: var(--Colors-Neutral-500);
  --Chips-Text: var(--Colors-Neutral-1100);
  --Chips-Text-Disable: var(--Colors-Neutral-400);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Chips-Rest-Surface: var(--Colors-Neutral-1100);
    --Chips-Rest-Selected-Surface: var(--Colors-Neutral-1000);
    --Chips-Hover-Surface: var(--Colors-Neutral-1000);
    --Chips-Selected-Surface: var(--Colors-Neutral-900);
    --Chips-Focus-Surface: var(--Colors-Neutral-900);
    --Chips-Focus-Selected-Surface: var(--Colors-Neutral-900);
    --Chips-Drag-Surface: var(--Colors-Neutral-900);
    --Chips-Drag-Selected-Surface: var(--Colors-Neutral-800);
    --Chips-Disable-Surface: var(--Colors-Neutral-1000);
    --Chips-Drag-Shadow: var(--Colors-Neutral-1100);
    --Chips-Stroke: var(--Colors-Neutral-900);
    --Chips-Stroke-Rest: var(--Colors-Neutral-600);
    --Chips-Text: var(--Colors-Neutral-50);
    --Chips-Text-Disable: var(--Colors-Neutral-900);
  }

  /* Color/Illustration */
  --Illustration-Shade-1: var(--Theme-Color-50);
  --Illustration-Shade-2: var(--Theme-Color-100);
  --Illustration-Shade-3: var(--Theme-Color-200);
  --Illustration-Shade-4: var(--Theme-Color-300);
  --Illustration-Shade-5: var(--Theme-Color-400);
  --Illustration-Shade-6: var(--Theme-Color-500);
  --Illustration-Shade-7: var(--Theme-Color-600);
  --Illustration-Shade-8: var(--Theme-Color-700);
  --Illustration-Shade-9: var(--Theme-Color-800);
  --Illustration-Shade-10: var(--Theme-Color-900);
  --Illustration-Shade-11: var(--Theme-Color-1000);
  --Illustration-Shade-12: var(--Theme-Color-1100);
  --Illustration-Stroke-Primary: var(--Colors-Neutral-1100);
  --Illustration-Stroke-Black-Theme: var(--Colors-Neutral-1100);
  --Illustration-Stroke-Tint: var(--Colors-Neutral-300);
  --Illustration-Surface-White-Theme: var(--Colors-Neutral-50);
  --Illustration-Surface-Primary: var(--Colors-Neutral-50);
  --Illustration-Surface-Secondary: var(--Colors-Neutral-100);
  --Illustration-Surface-Highlight-Tint-A: var(--Theme-Color-100);
  --Illustration-Surface-Highlight-Tint-B: var(--Theme-Color-200);
  --Illustration-Surface-Highlight-Bold: var(--Theme-Color-500);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Illustration-Stroke-Primary: var(--Colors-Neutral-900);
    --Illustration-Stroke-Black-Theme: var(--Theme-Color-700);
    --Illustration-Stroke-Tint: var(--Colors-Neutral-700);
    --Illustration-Surface-White-Theme: var(--Theme-Color-400);
    --Illustration-Surface-Primary: var(--Colors-Neutral-1100);
    --Illustration-Surface-Secondary: var(--Colors-Neutral-1000);
    --Illustration-Surface-Highlight-Tint-A: var(--Theme-Color-900);
    --Illustration-Surface-Highlight-Tint-B: var(--Theme-Color-800);
    --Illustration-Surface-Highlight-Bold: var(--Theme-Color-600);
  }

  /* Color/Widget */
  --Widget-Surface-Blueberry: var(--Colors-Blueberry-50);
  --Widget-Surface-Mint: var(--Colors-Mint-50);
  --Widget-Surface-Mango: var(--Colors-Mango-50);
  --Widget-Surface-Pinklatte: var(--Colors-Pink-Latte-50);
  --Widget-Surface-Grape: var(--Colors-Grape-50);
  --Widget-Surface-Aloe: var(--Colors-Aloe-50);
  --Widget-Highlight-Blueberry: var(--Colors-Blueberry-500);
  --Widget-Highlight-Mint: var(--Colors-Mint-500);
  --Widget-Highlight-Mango: var(--Colors-Mango-500);
  --Widget-Highlight-Pinklatte: var(--Colors-Pink-Latte-500);
  --Widget-Highlight-Grape: var(--Colors-Grape-500);
  --Widget-Highlight-Aloe: var(--Colors-Aloe-500);

  /* stylelint-disable-next-line no-duplicate-selectors */
  &[data-mode="dark"] {
    --Widget-Surface-Blueberry: var(--Colors-Blueberry-1000);
    --Widget-Surface-Mint: var(--Colors-Mint-1000);
    --Widget-Surface-Mango: var(--Colors-Mango-1000);
    --Widget-Surface-Pinklatte: var(--Colors-Pink-Latte-1000);
    --Widget-Surface-Grape: var(--Colors-Grape-1000);
    --Widget-Surface-Aloe: var(--Colors-Aloe-1000);
    --Widget-Highlight-Blueberry: var(--Colors-Blueberry-700);
    --Widget-Highlight-Mint: var(--Colors-Mint-700);
    --Widget-Highlight-Mango: var(--Colors-Mango-700);
    --Widget-Highlight-Pinklatte: var(--Colors-Pink-Latte-700);
    --Widget-Highlight-Grape: var(--Colors-Grape-700);
    --Widget-Highlight-Aloe: var(--Colors-Aloe-700);
  }

  /* Radius */
  --Radius-R4: 4px;
  --Radius-R6: 6px;
  --Radius-R8: 8px;
  --Radius-R12: 12px;
  --Radius-R16: 16px;
  --Radius-R20: 20px;
  --Radius-R24: 24px;
  --Radius-R32: 32px;
  --Radius-R40: 40px;
  --Radius-full: 999px;

  /* Spacing */
  --Spacing-S2: 2px;
  --Spacing-S4: 4px;
  --Spacing-S6: 6px;
  --Spacing-S8: 8px;
  --Spacing-S12: 12px;
  --Spacing-S16: 16px;
  --Spacing-S20: 20px;
  --Spacing-S24: 24px;
  --Spacing-S32: 32px;
  --Spacing-S40: 40px;
  --Spacing-S48: 48px;
  --Spacing-S56: 56px;
  --Spacing-S64: 64px;
  --Spacing-S72: 72px;
  --Spacing-S80: 80px;
  --Spacing-S96: 96px;
  --Spacing-S112: 112px;
  --Spacing-S128: 128px;
  --Spacing-S144: 144px;
  --Spacing-S160: 160px;
  --Spacing-S176: 176px;
  --Spacing-S192: 192px;
  --Stroke-ST1: 1px;
  --Stroke-ST2: 2px;
  --Stroke-ST3: 3px;
  --Stroke-ST4: 4px;
  --Stroke-ST5: 5px;
  --Stroke-ST6: 6px;
  --Stroke-ST7: 8px;
  --Stroke-ST8: 10px;

  /* Transition */
  --transition-duration: 200ms;
  --transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}