@use 'sass:map';
@use '@ecl/theme-ec/theme' as *;

:root {
  --ws-c-p: #{map.get($color, 'primary')};
  --ws-c-p-180: #{map.get($color, 'primary-180')};
  --ws-c-p-160: #{map.get($color, 'primary-160')};
  --ws-c-p-140: #{map.get($color, 'primary-140')};
  --ws-c-p-120: #{map.get($color, 'primary-120')};
  --ws-c-p-100: #{map.get($color, 'primary-100')};
  --ws-c-p-80: #{map.get($color, 'primary-80')};
  --ws-c-p-60: #{map.get($color, 'primary-60')};
  --ws-c-p-40: #{map.get($color, 'primary-40')};
  --ws-c-p-20: #{map.get($color, 'primary-20')};
  --ws-c-s: #{map.get($color, 'secondary')};
  --ws-c-s-180: #{map.get($color, 'secondary-180')};
  --ws-c-s-160: #{map.get($color, 'secondary-160')};
  --ws-c-s-140: #{map.get($color, 'secondary-140')};
  --ws-c-s-120: #{map.get($color, 'secondary-120')};
  --ws-c-s-100: #{map.get($color, 'secondary-100')};
  --ws-c-s-80: #{map.get($color, 'secondary-80')};
  --ws-c-s-60: #{map.get($color, 'secondary-60')};
  --ws-c-s-40: #{map.get($color, 'secondary-40')};
  --ws-c-s-20: #{map.get($color, 'secondary-20')};
  --ws-c-d: #{map.get($color, 'dark')};
  --ws-c-d-100: #{map.get($color, 'dark-100')};
  --ws-c-d-80: #{map.get($color, 'dark-80')};
  --ws-c-d-60: #{map.get($color, 'dark-60')};
  --ws-c-in: #{map.get($color, 'info')};
  --ws-c-su: #{map.get($color, 'success')};
  --ws-c-er: #{map.get($color, 'error')};
  --ws-c-wa: #{map.get($color, 'warning')};
  --ws-c-bg: #{map.get($color, 'background')};
  --ws-c-br: #{map.get($color, 'branding')};
  --ws-c-st: color-mix(in srgb, var(--ws-c-p) 50%, transparent);
  --ws-c-ov-l: color-mix(in srgb, var(--ws-c-d) 70%, transparent);
  --ws-c-ov-d: color-mix(in srgb, var(--ws-c-d) 90%, transparent);
  --ws-c-n: #{map.get($color, 'neutral-100')};
  --ws-c-n-180: #{map.get($color, 'neutral-180')};
  --ws-c-n-160: #{map.get($color, 'neutral-160')};
  --ws-c-n-140: #{map.get($color, 'neutral-140')};
  --ws-c-n-120: #{map.get($color, 'neutral-120')};
  --ws-c-n-100: #{map.get($color, 'neutral-100')};
  --ws-c-n-80: #{map.get($color, 'neutral-80')};
  --ws-c-n-60: #{map.get($color, 'neutral-60')};
  --ws-c-n-40: #{map.get($color, 'neutral-40')};
  --ws-c-n-20: #{map.get($color, 'neutral-20')};
  --ws-c-a: #{map.get($color, 'accent')};
  --ws-c-a-160: #{map.get($color, 'accent-160')};
  --ws-c-a-140: #{map.get($color, 'accent-140')};
  --ws-c-a-120: #{map.get($color, 'accent-120')};
  --ws-c-a-100: #{map.get($color, 'accent-100')};
  --ws-c-a-80: #{map.get($color, 'accent-80')};
  --ws-c-a-60: #{map.get($color, 'accent-60')};
  --ws-c-a-40: #{map.get($color, 'accent-40')};
  --ws-f-xs: #{map.get($font, 'xs')};
  --ws-f-s: #{map.get($font, 's')};
  --ws-f-m: #{map.get($font, 'm')};
  --ws-f-l: #{map.get($font, 'l')};
  --ws-f-xl: #{map.get($font, 'xl')};
  --ws-f-2xl: #{map.get($font, '2xl')};
  --ws-f-3xl: #{map.get($font, '3xl')};
  --ws-f-4xl: #{map.get($font, '4xl')};
  --ws-s-2xs: #{map.get($spacing, '2xs')};
  --ws-s-xs: #{map.get($spacing, 'xs')};
  --ws-s-s: #{map.get($spacing, 's')};
  --ws-s-m: #{map.get($spacing, 'm')};
  --ws-s-l: #{map.get($spacing, 'l')};
  --ws-s-xl: #{map.get($spacing, 'xl')};
  --ws-s-2xl: #{map.get($spacing, '2xl')};
  --ws-s-3xl: #{map.get($spacing, '3xl')};
  --ws-s-4xl: #{map.get($spacing, '4xl')};
  --ws-s-5xl: #{map.get($spacing, '5xl')};
  --ws-s-6xl: #{map.get($spacing, '6xl')};
  --ws-sh-1: #{map.get($shadow, '1')};
  --ws-sh-6: #{map.get($shadow, '6')};
  --ws-sh-12: #{map.get($shadow, '12')};
  --ws-sh-16: #{map.get($shadow, '16')};
  --ws-max-w: #{$max-width};
}
