@use 'sass:map';
@use 'index' as *;

:root {
  --ecl-color-primary: #{map.get($color-default, 'primary-600')};
  --ecl-color-primary-950: #{map.get($color-default, 'primary-950')};
  --ecl-color-primary-900: #{map.get($color-default, 'primary-900')};
  --ecl-color-primary-800: #{map.get($color-default, 'primary-800')};
  --ecl-color-primary-700: #{map.get($color-default, 'primary-700')};
  --ecl-color-primary-600: #{map.get($color-default, 'primary-600')};
  --ecl-color-primary-500: #{map.get($color-default, 'primary-500')};
  --ecl-color-primary-400: #{map.get($color-default, 'primary-400')};
  --ecl-color-primary-300: #{map.get($color-default, 'primary-300')};
  --ecl-color-primary-200: #{map.get($color-default, 'primary-200')};
  --ecl-color-primary-100: #{map.get($color-default, 'primary-100')};
  --ecl-color-primary-75: #{map.get($color-default, 'primary-75')};
  --ecl-color-primary-50: #{map.get($color-default, 'primary-50')};
  --ecl-color-primary-25: #{map.get($color-default, 'primary-25')};
  --ecl-color-secondary: #{map.get($color-default, 'secondary-400')};
  --ecl-color-secondary-950: #{map.get($color-default, 'secondary-950')};
  --ecl-color-secondary-900: #{map.get($color-default, 'secondary-900')};
  --ecl-color-secondary-800: #{map.get($color-default, 'secondary-800')};
  --ecl-color-secondary-700: #{map.get($color-default, 'secondary-700')};
  --ecl-color-secondary-600: #{map.get($color-default, 'secondary-600')};
  --ecl-color-secondary-500: #{map.get($color-default, 'secondary-500')};
  --ecl-color-secondary-400: #{map.get($color-default, 'secondary-400')};
  --ecl-color-secondary-300: #{map.get($color-default, 'secondary-300')};
  --ecl-color-secondary-200: #{map.get($color-default, 'secondary-200')};
  --ecl-color-secondary-100: #{map.get($color-default, 'secondary-100')};
  --ecl-color-secondary-75: #{map.get($color-default, 'secondary-75')};
  --ecl-color-secondary-50: #{map.get($color-default, 'secondary-50')};
  --ecl-color-secondary-25: #{map.get($color-default, 'secondary-25')};
  --ecl-color-neutral: #{map.get($color-default, 'neutral-600')};
  --ecl-color-neutral-950: #{map.get($color-default, 'neutral-950')};
  --ecl-color-neutral-900: #{map.get($color-default, 'neutral-900')};
  --ecl-color-neutral-800: #{map.get($color-default, 'neutral-800')};
  --ecl-color-neutral-700: #{map.get($color-default, 'neutral-700')};
  --ecl-color-neutral-600: #{map.get($color-default, 'neutral-600')};
  --ecl-color-neutral-500: #{map.get($color-default, 'neutral-500')};
  --ecl-color-neutral-400: #{map.get($color-default, 'neutral-400')};
  --ecl-color-neutral-300: #{map.get($color-default, 'neutral-300')};
  --ecl-color-neutral-200: #{map.get($color-default, 'neutral-200')};
  --ecl-color-neutral-100: #{map.get($color-default, 'neutral-100')};
  --ecl-color-neutral-75: #{map.get($color-default, 'neutral-75')};
  --ecl-color-neutral-50: #{map.get($color-default, 'neutral-50')};
  --ecl-color-neutral-25: #{map.get($color-default, 'neutral-25')};
  --ecl-color-grey: #{map.get($color-default, 'grey-950')};
  --ecl-color-grey-950: #{map.get($color-default, 'grey-950')};
  --ecl-color-grey-900: #{map.get($color-default, 'grey-900')};
  --ecl-color-grey-800: #{map.get($color-default, 'grey-800')};
  --ecl-color-grey-700: #{map.get($color-default, 'grey-700')};
  --ecl-color-grey-600: #{map.get($color-default, 'grey-600')};
  --ecl-color-grey-500: #{map.get($color-default, 'grey-500')};
  --ecl-color-grey-400: #{map.get($color-default, 'grey-400')};
  --ecl-color-grey-300: #{map.get($color-default, 'grey-300')};
  --ecl-color-grey-200: #{map.get($color-default, 'grey-200')};
  --ecl-color-grey-100: #{map.get($color-default, 'grey-100')};
  --ecl-color-grey-75: #{map.get($color-default, 'grey-75')};
  --ecl-color-grey-50: #{map.get($color-default, 'grey-50')};
  --ecl-color-grey-25: #{map.get($color-default, 'grey-25')};
  --ecl-color-grey-alpha: #{map.get($color-default, 'grey-alpha-950')};
  --ecl-color-grey-alpha-950: #{map.get($color-default, 'grey-alpha-950')};
  --ecl-color-grey-alpha-900: #{map.get($color-default, 'grey-alpha-900')};
  --ecl-color-grey-alpha-800: #{map.get($color-default, 'grey-alpha-800')};
  --ecl-color-grey-alpha-700: #{map.get($color-default, 'grey-alpha-700')};
  --ecl-color-grey-alpha-600: #{map.get($color-default, 'grey-alpha-600')};
  --ecl-color-grey-alpha-500: #{map.get($color-default, 'grey-alpha-500')};
  --ecl-color-grey-alpha-400: #{map.get($color-default, 'grey-alpha-400')};
  --ecl-color-grey-alpha-300: #{map.get($color-default, 'grey-alpha-300')};
  --ecl-color-grey-alpha-200: #{map.get($color-default, 'grey-alpha-200')};
  --ecl-color-grey-alpha-100: #{map.get($color-default, 'grey-alpha-100')};
  --ecl-color-grey-alpha-75: #{map.get($color-default, 'grey-alpha-75')};
  --ecl-color-grey-alpha-50: #{map.get($color-default, 'grey-alpha-50')};
  --ecl-color-grey-alpha-25: #{map.get($color-default, 'grey-alpha-25')};
  --ecl-color-white-alpha: #{map.get($color-default, 'white-alpha-600')};
  --ecl-color-white-alpha-950: #{map.get($color-default, 'white-alpha-950')};
  --ecl-color-white-alpha-900: #{map.get($color-default, 'white-alpha-900')};
  --ecl-color-white-alpha-800: #{map.get($color-default, 'white-alpha-800')};
  --ecl-color-white-alpha-700: #{map.get($color-default, 'white-alpha-700')};
  --ecl-color-white-alpha-600: #{map.get($color-default, 'white-alpha-600')};
  --ecl-color-white-alpha-500: #{map.get($color-default, 'white-alpha-500')};
  --ecl-color-white-alpha-400: #{map.get($color-default, 'white-alpha-400')};
  --ecl-color-white-alpha-300: #{map.get($color-default, 'white-alpha-300')};
  --ecl-color-white-alpha-200: #{map.get($color-default, 'white-alpha-200')};
  --ecl-color-white-alpha-100: #{map.get($color-default, 'white-alpha-100')};
  --ecl-color-white-alpha-75: #{map.get($color-default, 'white-alpha-75')};
  --ecl-color-white-alpha-50: #{map.get($color-default, 'white-alpha-50')};
  --ecl-color-white-alpha-25: #{map.get($color-default, 'white-alpha-25')};
  --ecl-color-monochrome: #{map.get($color-default, 'monochrome-500')};
  --ecl-color-monochrome-950: #{map.get($color-default, 'monochrome-950')};
  --ecl-color-monochrome-900: #{map.get($color-default, 'monochrome-900')};
  --ecl-color-monochrome-800: #{map.get($color-default, 'monochrome-800')};
  --ecl-color-monochrome-700: #{map.get($color-default, 'monochrome-700')};
  --ecl-color-monochrome-600: #{map.get($color-default, 'monochrome-600')};
  --ecl-color-monochrome-500: #{map.get($color-default, 'monochrome-500')};
  --ecl-color-monochrome-400: #{map.get($color-default, 'monochrome-400')};
  --ecl-color-monochrome-300: #{map.get($color-default, 'monochrome-300')};
  --ecl-color-monochrome-200: #{map.get($color-default, 'monochrome-200')};
  --ecl-color-monochrome-100: #{map.get($color-default, 'monochrome-100')};
  --ecl-color-monochrome-75: #{map.get($color-default, 'monochrome-75')};
  --ecl-color-monochrome-50: #{map.get($color-default, 'monochrome-50')};
  --ecl-color-monochrome-25: #{map.get($color-default, 'monochrome-25')};
  --ecl-color-info: #{map.get($color-default, 'info-600')};
  --ecl-color-info-950: #{map.get($color-default, 'info-950')};
  --ecl-color-info-900: #{map.get($color-default, 'info-900')};
  --ecl-color-info-800: #{map.get($color-default, 'info-800')};
  --ecl-color-info-700: #{map.get($color-default, 'info-700')};
  --ecl-color-info-600: #{map.get($color-default, 'info-600')};
  --ecl-color-info-500: #{map.get($color-default, 'info-500')};
  --ecl-color-info-400: #{map.get($color-default, 'info-400')};
  --ecl-color-info-300: #{map.get($color-default, 'info-300')};
  --ecl-color-info-200: #{map.get($color-default, 'info-200')};
  --ecl-color-info-100: #{map.get($color-default, 'info-100')};
  --ecl-color-info-75: #{map.get($color-default, 'info-75')};
  --ecl-color-info-50: #{map.get($color-default, 'info-50')};
  --ecl-color-info-25: #{map.get($color-default, 'info-25')};
  --ecl-color-success: #{map.get($color-default, 'success-700')};
  --ecl-color-success-950: #{map.get($color-default, 'success-950')};
  --ecl-color-success-900: #{map.get($color-default, 'success-900')};
  --ecl-color-success-800: #{map.get($color-default, 'success-800')};
  --ecl-color-success-700: #{map.get($color-default, 'success-700')};
  --ecl-color-success-600: #{map.get($color-default, 'success-600')};
  --ecl-color-success-500: #{map.get($color-default, 'success-500')};
  --ecl-color-success-400: #{map.get($color-default, 'success-400')};
  --ecl-color-success-300: #{map.get($color-default, 'success-300')};
  --ecl-color-success-200: #{map.get($color-default, 'success-200')};
  --ecl-color-success-100: #{map.get($color-default, 'success-100')};
  --ecl-color-success-75: #{map.get($color-default, 'success-75')};
  --ecl-color-success-50: #{map.get($color-default, 'success-50')};
  --ecl-color-success-25: #{map.get($color-default, 'success-25')};
  --ecl-color-error: #{map.get($color-default, 'error-600')};
  --ecl-color-error-950: #{map.get($color-default, 'error-950')};
  --ecl-color-error-900: #{map.get($color-default, 'error-900')};
  --ecl-color-error-800: #{map.get($color-default, 'error-800')};
  --ecl-color-error-700: #{map.get($color-default, 'error-700')};
  --ecl-color-error-600: #{map.get($color-default, 'error-600')};
  --ecl-color-error-500: #{map.get($color-default, 'error-500')};
  --ecl-color-error-400: #{map.get($color-default, 'error-400')};
  --ecl-color-error-300: #{map.get($color-default, 'error-300')};
  --ecl-color-error-200: #{map.get($color-default, 'error-200')};
  --ecl-color-error-100: #{map.get($color-default, 'error-100')};
  --ecl-color-error-75: #{map.get($color-default, 'error-75')};
  --ecl-color-error-50: #{map.get($color-default, 'error-50')};
  --ecl-color-error-25: #{map.get($color-default, 'error-25')};
  --ecl-color-warning: #{map.get($color-default, 'warning-500')};
  --ecl-color-warning-950: #{map.get($color-default, 'warning-950')};
  --ecl-color-warning-900: #{map.get($color-default, 'warning-900')};
  --ecl-color-warning-800: #{map.get($color-default, 'warning-800')};
  --ecl-color-warning-700: #{map.get($color-default, 'warning-700')};
  --ecl-color-warning-600: #{map.get($color-default, 'warning-600')};
  --ecl-color-warning-500: #{map.get($color-default, 'warning-500')};
  --ecl-color-warning-400: #{map.get($color-default, 'warning-400')};
  --ecl-color-warning-300: #{map.get($color-default, 'warning-300')};
  --ecl-color-warning-200: #{map.get($color-default, 'warning-200')};
  --ecl-color-warning-100: #{map.get($color-default, 'warning-100')};
  --ecl-color-warning-75: #{map.get($color-default, 'warning-75')};
  --ecl-color-warning-50: #{map.get($color-default, 'warning-50')};
  --ecl-color-warning-25: #{map.get($color-default, 'warning-25')};
  --ecl-color-corporate-gradient: #{map.get($color-other, 'corporate-gradient')};

  // font
  --ecl-font-family-default: #{map.get($font-family, 'default')};
  --ecl-font-family-print-default: #{map.get($font-family-print, 'default')};
  --ecl-font-family-print-alt: #{map.get($font-family-print, 'alt')};
  --ecl-font-2xs: #{map.get($font, '2xs')};
  --ecl-font-xs: #{map.get($font, 'xs')};
  --ecl-font-s: #{map.get($font, 's')};
  --ecl-font-m: #{map.get($font, 'm')};
  --ecl-font-l: #{map.get($font, 'l')};
  --ecl-font-xl: #{map.get($font, 'xl')};
  --ecl-font-2xl: #{map.get($font, '2xl')};
  --ecl-font-3xl: #{map.get($font, '3xl')};
  --ecl-font-4xl: #{map.get($font, '4xl')};
  --ecl-font-5xl: #{map.get($font, '5xl')};
  --ecl-font-6xl: #{map.get($font, '6xl')};
  --ecl-font-7xl: #{map.get($font, '7xl')};
  --ecl-font-8xl: #{map.get($font, '8xl')};
  --ecl-font-9xl: #{map.get($font, '9xl')};
  --ecl-font-10xl: #{map.get($font, '10xl')};

  // font-size
  --ecl-font-size-2xs: #{map.get($font-size, '2xs')};
  --ecl-font-size-xs: #{map.get($font-size, 'xs')};
  --ecl-font-size-s: #{map.get($font-size, 's')};
  --ecl-font-size-m: #{map.get($font-size, 'm')};
  --ecl-font-size-l: #{map.get($font-size, 'l')};
  --ecl-font-size-xl: #{map.get($font-size, 'xl')};
  --ecl-font-size-2xl: #{map.get($font-size, '2xl')};
  --ecl-font-size-3xl: #{map.get($font-size, '3xl')};
  --ecl-font-size-4xl: #{map.get($font-size, '4xl')};
  --ecl-font-size-5xl: #{map.get($font-size, '5xl')};
  --ecl-font-size-6xl: #{map.get($font-size, '6xl')};
  --ecl-font-size-7xl: #{map.get($font-size, '7xl')};
  --ecl-font-size-8xl: #{map.get($font-size, '8xl')};
  --ecl-font-size-9xl: #{map.get($font-size, '9xl')};
  --ecl-font-size-10xl: #{map.get($font-size, '10xl')};

  // line-height:
  --ecl-line-height-3xs: #{map.get($line-height, '3xs')};
  --ecl-line-height-2xs: #{map.get($line-height, '2xs')};
  --ecl-line-height-xs: #{map.get($line-height, 'xs')};
  --ecl-line-height-s: #{map.get($line-height, 's')};
  --ecl-line-height-m: #{map.get($line-height, 'm')};
  --ecl-line-height-l: #{map.get($line-height, 'l')};
  --ecl-line-height-xl: #{map.get($line-height, 'xl')};
  --ecl-line-height-2xl: #{map.get($line-height, '2xl')};
  --ecl-line-height-3xl: #{map.get($line-height, '3xl')};
  --ecl-line-height-4xl: #{map.get($line-height, '4xl')};
  --ecl-line-height-5xl: #{map.get($line-height, '5xl')};
  --ecl-line-height-6xl: #{map.get($line-height, '6xl')};
  --ecl-line-height-7xl: #{map.get($line-height, '7xl')};
  --ecl-line-height-8xl: #{map.get($line-height, '8xl')};
  --ecl-line-height-9xl: #{map.get($line-height, '9xl')};
  --ecl-line-height-10xl: #{map.get($line-height, '10xl')};

  // spacing
  --ecl-spacing-5xs: #{map.get($spacing, '5xs')};
  --ecl-spacing-4xs: #{map.get($spacing, '4xs')};
  --ecl-spacing-3xs: #{map.get($spacing, '3xs')};
  --ecl-spacing-2xs: #{map.get($spacing, '2xs')};
  --ecl-spacing-xs: #{map.get($spacing, 'xs')};
  --ecl-spacing-s: #{map.get($spacing, 's')};
  --ecl-spacing-m: #{map.get($spacing, 'm')};
  --ecl-spacing-l: #{map.get($spacing, 'l')};
  --ecl-spacing-xl: #{map.get($spacing, 'xl')};
  --ecl-spacing-2xl: #{map.get($spacing, '2xl')};
  --ecl-spacing-3xl: #{map.get($spacing, '3xl')};
  --ecl-spacing-4xl: #{map.get($spacing, '4xl')};
  --ecl-spacing-5xl: #{map.get($spacing, '5xl')};
  --ecl-spacing-6xl: #{map.get($spacing, '6xl')};
  --ecl-spacing-7xl: #{map.get($spacing, '7xl')};
  --ecl-spacing-8xl: #{map.get($spacing, '8xl')};
  --ecl-spacing-9xl: #{map.get($spacing, '9xl')};
  --ecl-spacing-10xl: #{map.get($spacing, '10xl')};
  --ecl-spacing-11xl: #{map.get($spacing, '11xl')};
  --ecl-spacing-12xl: #{map.get($spacing, '12xl')};
  --ecl-spacing-13xl: #{map.get($spacing, '13xl')};

  // shadow
  --ecl-shadow-1: #{map.get($shadow, '1')};
  --ecl-shadow-2: #{map.get($shadow, '2')};
  --ecl-shadow-3: #{map.get($shadow, '3')};
  --ecl-shadow-4: #{map.get($shadow, '4')};
  --ecl-shadow-5: #{map.get($shadow, '5')};

  // width
  --ecl-max-width: #{$max-width};

  // Aliases (internal use)
  --c-p: var(--ecl-color-primary);
  --c-p-950: var(--ecl-color-primary-950);
  --c-p-900: var(--ecl-color-primary-900);
  --c-p-800: var(--ecl-color-primary-800);
  --c-p-700: var(--ecl-color-primary-700);
  --c-p-600: var(--ecl-color-primary-600);
  --c-p-500: var(--ecl-color-primary-500);
  --c-p-400: var(--ecl-color-primary-400);
  --c-p-300: var(--ecl-color-primary-300);
  --c-p-200: var(--ecl-color-primary-200);
  --c-p-100: var(--ecl-color-primary-100);
  --c-p-75: var(--ecl-color-primary-75);
  --c-p-50: var(--ecl-color-primary-50);
  --c-p-25: var(--ecl-color-primary-25);
  --c-s: var(--ecl-color-secondary);
  --c-s-950: var(--ecl-color-secondary-950);
  --c-s-900: var(--ecl-color-secondary-900);
  --c-s-800: var(--ecl-color-secondary-800);
  --c-s-700: var(--ecl-color-secondary-700);
  --c-s-600: var(--ecl-color-secondary-600);
  --c-s-500: var(--ecl-color-secondary-500);
  --c-s-400: var(--ecl-color-secondary-400);
  --c-s-300: var(--ecl-color-secondary-300);
  --c-s-200: var(--ecl-color-secondary-200);
  --c-s-100: var(--ecl-color-secondary-100);
  --c-s-75: var(--ecl-color-secondary-75);
  --c-s-50: var(--ecl-color-secondary-50);
  --c-s-25: var(--ecl-color-secondary-25);
  --c-n: var(--ecl-color-neutral);
  --c-n-950: var(--ecl-color-neutral-950);
  --c-n-900: var(--ecl-color-neutral-900);
  --c-n-800: var(--ecl-color-neutral-800);
  --c-n-700: var(--ecl-color-neutral-700);
  --c-n-600: var(--ecl-color-neutral-600);
  --c-n-500: var(--ecl-color-neutral-500);
  --c-n-400: var(--ecl-color-neutral-400);
  --c-n-300: var(--ecl-color-neutral-300);
  --c-n-200: var(--ecl-color-neutral-200);
  --c-n-100: var(--ecl-color-neutral-100);
  --c-n-75: var(--ecl-color-neutral-75);
  --c-n-50: var(--ecl-color-neutral-50);
  --c-n-25: var(--ecl-color-neutral-25);
  --c-g: var(--ecl-color-grey);
  --c-g-950: var(--ecl-color-grey-950);
  --c-g-900: var(--ecl-color-grey-900);
  --c-g-800: var(--ecl-color-grey-800);
  --c-g-700: var(--ecl-color-grey-700);
  --c-g-600: var(--ecl-color-grey-600);
  --c-g-500: var(--ecl-color-grey-500);
  --c-g-400: var(--ecl-color-grey-400);
  --c-g-300: var(--ecl-color-grey-300);
  --c-g-200: var(--ecl-color-grey-200);
  --c-g-100: var(--ecl-color-grey-100);
  --c-g-75: var(--ecl-color-grey-75);
  --c-g-50: var(--ecl-color-grey-50);
  --c-g-25: var(--ecl-color-grey-25);
  --c-a: var(--ecl-color-grey-alpha);
  --c-a-950: var(--ecl-color-grey-alpha-950);
  --c-a-900: var(--ecl-color-grey-alpha-900);
  --c-a-800: var(--ecl-color-grey-alpha-800);
  --c-a-700: var(--ecl-color-grey-alpha-700);
  --c-a-600: var(--ecl-color-grey-alpha-600);
  --c-a-500: var(--ecl-color-grey-alpha-500);
  --c-a-400: var(--ecl-color-grey-alpha-400);
  --c-a-300: var(--ecl-color-grey-alpha-300);
  --c-a-200: var(--ecl-color-grey-alpha-200);
  --c-a-100: var(--ecl-color-grey-alpha-100);
  --c-a-75: var(--ecl-color-grey-alpha-75);
  --c-a-50: var(--ecl-color-grey-alpha-50);
  --c-a-25: var(--ecl-color-grey-alpha-25);
  --c-w: var(--ecl-color-white-alpha);
  --c-w-950: var(--ecl-color-white-alpha-950);
  --c-w-900: var(--ecl-color-white-alpha-900);
  --c-w-800: var(--ecl-color-white-alpha-800);
  --c-w-700: var(--ecl-color-white-alpha-700);
  --c-w-600: var(--ecl-color-white-alpha-600);
  --c-w-500: var(--ecl-color-white-alpha-500);
  --c-w-400: var(--ecl-color-white-alpha-400);
  --c-w-300: var(--ecl-color-white-alpha-300);
  --c-w-200: var(--ecl-color-white-alpha-200);
  --c-w-100: var(--ecl-color-white-alpha-100);
  --c-w-75: var(--ecl-color-white-alpha-75);
  --c-w-50: var(--ecl-color-white-alpha-50);
  --c-w-25: var(--ecl-color-white-alpha-25);
  --c-m: var(--ecl-color-monochrome);
  --c-m-950: var(--ecl-color-monochrome-950);
  --c-m-900: var(--ecl-color-monochrome-900);
  --c-m-800: var(--ecl-color-monochrome-800);
  --c-m-700: var(--ecl-color-monochrome-700);
  --c-m-600: var(--ecl-color-monochrome-600);
  --c-m-500: var(--ecl-color-monochrome-500);
  --c-m-400: var(--ecl-color-monochrome-400);
  --c-m-300: var(--ecl-color-monochrome-300);
  --c-m-200: var(--ecl-color-monochrome-200);
  --c-m-100: var(--ecl-color-monochrome-100);
  --c-m-75: var(--ecl-color-monochrome-75);
  --c-m-50: var(--ecl-color-monochrome-50);
  --c-m-25: var(--ecl-color-monochrome-25);
  --c-in: var(--ecl-color-info);
  --c-in-950: var(--ecl-color-info-950);
  --c-in-900: var(--ecl-color-info-900);
  --c-in-800: var(--ecl-color-info-800);
  --c-in-700: var(--ecl-color-info-700);
  --c-in-600: var(--ecl-color-info-600);
  --c-in-500: var(--ecl-color-info-500);
  --c-in-400: var(--ecl-color-info-400);
  --c-in-300: var(--ecl-color-info-300);
  --c-in-200: var(--ecl-color-info-200);
  --c-in-100: var(--ecl-color-info-100);
  --c-in-75: var(--ecl-color-info-75);
  --c-in-50: var(--ecl-color-info-50);
  --c-in-25: var(--ecl-color-info-25);
  --c-su: var(--ecl-color-success);
  --c-su-950: var(--ecl-color-success-950);
  --c-su-900: var(--ecl-color-success-900);
  --c-su-800: var(--ecl-color-success-800);
  --c-su-700: var(--ecl-color-success-700);
  --c-su-600: var(--ecl-color-success-600);
  --c-su-500: var(--ecl-color-success-500);
  --c-su-400: var(--ecl-color-success-400);
  --c-su-300: var(--ecl-color-success-300);
  --c-su-200: var(--ecl-color-success-200);
  --c-su-100: var(--ecl-color-success-100);
  --c-su-75: var(--ecl-color-success-75);
  --c-su-50: var(--ecl-color-success-50);
  --c-su-25: var(--ecl-color-success-25);
  --c-er: var(--ecl-color-error);
  --c-er-950: var(--ecl-color-error-950);
  --c-er-900: var(--ecl-color-error-900);
  --c-er-800: var(--ecl-color-error-800);
  --c-er-700: var(--ecl-color-error-700);
  --c-er-600: var(--ecl-color-error-600);
  --c-er-500: var(--ecl-color-error-500);
  --c-er-400: var(--ecl-color-error-400);
  --c-er-300: var(--ecl-color-error-300);
  --c-er-200: var(--ecl-color-error-200);
  --c-er-100: var(--ecl-color-error-100);
  --c-er-75: var(--ecl-color-error-75);
  --c-er-50: var(--ecl-color-error-50);
  --c-er-25: var(--ecl-color-error-25);
  --c-wa: var(--ecl-color-warning);
  --c-wa-950: var(--ecl-color-warning-950);
  --c-wa-900: var(--ecl-color-warning-900);
  --c-wa-800: var(--ecl-color-warning-800);
  --c-wa-700: var(--ecl-color-warning-700);
  --c-wa-600: var(--ecl-color-warning-600);
  --c-wa-500: var(--ecl-color-warning-500);
  --c-wa-400: var(--ecl-color-warning-400);
  --c-wa-300: var(--ecl-color-warning-300);
  --c-wa-200: var(--ecl-color-warning-200);
  --c-wa-100: var(--ecl-color-warning-100);
  --c-wa-75: var(--ecl-color-warning-75);
  --c-wa-50: var(--ecl-color-warning-50);
  --c-wa-25: var(--ecl-color-warning-25);

  // font
  --ff-d: var(--ecl-font-family-default);
  --f-2xs: var(--ecl-font-2xs);
  --f-xs: var(--ecl-font-xs);
  --f-s: var(--ecl-font-s);
  --f-m: var(--ecl-font-m);
  --f-l: var(--ecl-font-l);
  --f-xl: var(--ecl-font-xl);
  --f-2xl: var(--ecl-font-2xl);
  --f-3xl: var(--ecl-font-3xl);
  --f-4xl: var(--ecl-font-4xl);
  --f-5xl: var(--ecl-font-5xl);
  --f-6xl: var(--ecl-font-6xl);
  --f-7xl: var(--ecl-font-7xl);
  --f-8xl: var(--ecl-font-8xl);
  --f-9xl: var(--ecl-font-9xl);
  --f-10xl: var(--ecl-font-10xl);

  // font-size
  --fs-2xs: var(--ecl-font-size-2xs);
  --fs-xs: var(--ecl-font-size-xs);
  --fs-s: var(--ecl-font-size-s);
  --fs-m: var(--ecl-font-size-m);
  --fs-l: var(--ecl-font-size-l);
  --fs-xl: var(--ecl-font-size-xl);
  --fs-2xl: var(--ecl-font-size-2xl);
  --fs-3xl: var(--ecl-font-size-3xl);
  --fs-4xl: var(--ecl-font-size-4xl);
  --fs-5xl: var(--ecl-font-size-5xl);
  --fs-6xl: var(--ecl-font-size-6xl);
  --fs-7xl: var(--ecl-font-size-7xl);
  --fs-8xl: var(--ecl-font-size-8xl);
  --fs-9xl: var(--ecl-font-size-9xl);
  --fs-10xl: var(--ecl-font-size-10xl);

  // line-height:
  --lh-3xs: var(--ecl-line-height-3xs);
  --lh-2xs: var(--ecl-line-height-2xs);
  --lh-xs: var(--ecl-line-height-xs);
  --lh-s: var(--ecl-line-height-s);
  --lh-m: var(--ecl-line-height-m);
  --lh-l: var(--ecl-line-height-l);
  --lh-xl: var(--ecl-line-height-xl);
  --lh-2xl: var(--ecl-line-height-2xl);
  --lh-3xl: var(--ecl-line-height-3xl);
  --lh-4xl: var(--ecl-line-height-4xl);
  --lh-5xl: var(--ecl-line-height-5xl);
  --lh-6xl: var(--ecl-line-height-6xl);
  --lh-7xl: var(--ecl-line-height-7xl);
  --lh-8xl: var(--ecl-line-height-8xl);
  --lh-9xl: var(--ecl-line-height-9xl);
  --lh-10xl: var(--ecl-line-height-10xl);

  // spacing
  --s-5xs: var(--ecl-spacing-5xs);
  --s-4xs: var(--ecl-spacing-4xs);
  --s-3xs: var(--ecl-spacing-3xs);
  --s-2xs: var(--ecl-spacing-2xs);
  --s-xs: var(--ecl-spacing-xs);
  --s-s: var(--ecl-spacing-s);
  --s-m: var(--ecl-spacing-m);
  --s-l: var(--ecl-spacing-l);
  --s-xl: var(--ecl-spacing-xl);
  --s-2xl: var(--ecl-spacing-2xl);
  --s-3xl: var(--ecl-spacing-3xl);
  --s-4xl: var(--ecl-spacing-4xl);
  --s-5xl: var(--ecl-spacing-5xl);
  --s-6xl: var(--ecl-spacing-6xl);
  --s-7xl: var(--ecl-spacing-7xl);
  --s-8xl: var(--ecl-spacing-8xl);
  --s-9xl: var(--ecl-spacing-9xl);
  --s-10xl: var(--ecl-spacing-10xl);
  --s-11xl: var(--ecl-spacing-11xl);
  --s-12xl: var(--ecl-spacing-12xl);
  --s-13xl: var(--ecl-spacing-13xl);

  // shadow
  --sh-1: var(--ecl-shadow-1);
  --sh-2: var(--ecl-shadow-2);
  --sh-3: var(--ecl-shadow-3);
  --sh-4: var(--ecl-shadow-4);
  --sh-5: var(--ecl-shadow-5);

  // width
  --max-w: var(--ecl-max-width);

  // Component properties
  --ecl-focus-outline-color: var(--cm-border-primary);
  --ecl-link-color: var(--cm-on-surface-primary);
  --ecl-link-color-hover: var(--cm-on-surface-primary-highest);
  --ecl-link-color-active: var(--cm-on-surface-brand);
  --ecl-text-field-height: 3rem;

  // Default color mode
  // surface
  --cm-surface-brand: var(--c-g-950);
  --cm-surface-inverted: #fff;
  --cm-surface-transparent-70: color-mix(
    in srgb,
    var(--c-n-950) 70%,
    transparent
  );
  --cm-surface-transparent-01: color-mix(in srgb, #fff 0.1%, transparent);
  --cm-surface-lowest: var(--c-p-50);
  --cm-surface-lowest-variant: color-mix(
    in srgb,
    #{map.get($color-palette, 'warm-grey-50')} 50%,
    transparent
  );
  --cm-surface-low-0: var(--c-p-50);
  --cm-surface-low-1: var(--c-p-100);
  --cm-surface-low-2: var(--c-p-200);
  --cm-surface-medium-0: var(--c-p-200);
  --cm-surface-medium-1: var(--c-p-300);
  --cm-surface-0: var(--c-g-950);
  --cm-surface-0-text-media: var(--c-g-950);
  --cm-surface-0-add-to-calendar: var(--c-g-950);
  --cm-surface-variant-1: #{map.get($color-palette, 'warm-grey-100')};
  --cm-surface-variant-2: var(--c-g-950);
  --cm-surface-primary-lowest: var(--c-p-50);
  --cm-surface-primary-low-0: var(--c-p-100);
  --cm-surface-primary-low-1: var(--c-p-200);
  --cm-surface-primary-medium: var(--c-p-300);
  --cm-surface-primary: var(--c-p-600);
  --cm-surface-primary-high: var(--c-p-700);
  --cm-surface-primary-highest: var(--c-p-800);
  --cm-surface-secondary-low: var(--c-s-50);
  --cm-surface-secondary-medium-0: var(--c-s-200);
  --cm-surface-secondary-medium-1: var(--c-s-300);
  --cm-surface-secondary: var(--c-s-400);
  --cm-surface-secondary-high: var(--c-s-500);
  --cm-surface-secondary-highest: var(--c-s-600);
  --cm-surface-neutral-lowest: var(--c-n-50);
  --cm-surface-neutral-low: var(--c-n-75);
  --cm-surface-neutral-medium: var(--c-n-200);
  --cm-surface-neutral: var(--c-n-700);
  --cm-surface-grey-low-0-transparent: color-mix(
    in srgb,
    var(--c-g-50) 50%,
    transparent
  );
  --cm-surface-grey-low-0: var(--c-g-50);
  --cm-surface-grey-low-1: var(--c-g-75);
  --cm-surface-grey-medium: var(--c-g-400);
  --cm-surface-grey-highest-0: var(--c-g-950);
  --cm-surface-grey-highest-1-transparent: var(--c-a-800);
  --cm-surface-grey-highest-2-transparent: var(--c-a-700);
  --cm-surface-status-error-lowest: var(--c-er-50);
  --cm-surface-status-error: var(--c-er-600);
  --cm-surface-status-warning-lowest: var(--c-wa-50);
  --cm-surface-status-warning: var(--c-wa-500);
  --cm-surface-status-success-lowest: var(--c-su-50);
  --cm-surface-status-success: var(--c-su-700);
  --cm-surface-status-info-lowest: var(--c-in-75);
  --cm-surface-status-info: var(--c-in-800);

  // on surface
  --cm-on-surface-brand: var(--c-g-950);
  --cm-on-surface-inverted: #fff;
  --cm-on-surface-text-media: #fff;
  --cm-on-surface-add-to-calendar: #fff;
  --cm-on-surface-swap-0: #fff;
  --cm-on-surface-swap-1: var(--c-g-950);
  --cm-on-surface: var(--c-p-600);
  --cm-on-surface-1: var(--c-s-400);
  --cm-on-surface-2: var(--c-p-300);
  --cm-on-surface-3: #fff;
  --cm-on-surface-highlight: var(--c-s-75);
  --cm-on-surface-primary: var(--c-p-600);
  --cm-on-surface-primary-highest: var(--c-p-800);
  --cm-on-surface-secondary-medium: var(--c-s-100);
  --cm-on-surface-secondary-highest: var(--c-s-950);
  --cm-on-surface-neutral-low: var(--c-n-75);
  --cm-on-surface-neutral-medium: var(--c-n-300);
  --cm-on-surface-neutral-highest: var(--c-n-950);
  --cm-on-surface-grey-low-transparent: var(--c-a-300);
  --cm-on-surface-grey-medium: var(--c-g-500);
  --cm-on-surface-grey: var(--c-g-600);
  --cm-on-surface-status-error: var(--c-er-600);
  --cm-on-surface-status-warning: var(--c-wa-700);
  --cm-on-surface-status-success: var(--c-su-700);
  --cm-on-surface-status-info: var(--c-in-800);

  // border
  --cm-border-brand: var(--c-g-950);
  --cm-border-on-brand: color-mix(in srgb, var(--c-n-75) 60%, transparent);
  --cm-border-inverted-low-transparent: var(--c-w-200);
  --cm-border-inverted: #fff;
  --cm-border-low: var(--c-p-300);
  --cm-border-medium: var(--c-p-500);
  --cm-border: var(--c-p-600);
  --cm-border-high: var(--c-p-700);
  --cm-border-primary-medium: var(--c-p-300);
  --cm-border-primary: var(--c-p-600);
  --cm-border-primary-highest: var(--c-p-800);
  --cm-border-neutral-low: var(--c-n-50);
  --cm-border-neutral: var(--c-n-75);
  --cm-border-grey-lowest: var(--c-g-75);
  --cm-border-grey-low: var(--c-g-100);
  --cm-border-grey-medium: var(--c-g-500);
  --cm-border-grey: var(--c-g-600);
  --cm-border-status-error: var(--c-er-600);
  --cm-border-status-warning: var(--c-wa-600);
  --cm-border-status-success: var(--c-su-700);
  --cm-border-status-info: var(--c-in-800);
}