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

:root {
  --ecl-color-primary: #{map.get($color, 'primary')};
  --ecl-color-primary-180: #{map.get($color, 'primary-180')};
  --ecl-color-primary-160: #{map.get($color, 'primary-160')};
  --ecl-color-primary-140: #{map.get($color, 'primary-140')};
  --ecl-color-primary-120: #{map.get($color, 'primary-120')};
  --ecl-color-primary-100: #{map.get($color, 'primary-100')};
  --ecl-color-primary-80: #{map.get($color, 'primary-80')};
  --ecl-color-primary-60: #{map.get($color, 'primary-60')};
  --ecl-color-primary-40: #{map.get($color, 'primary-40')};
  --ecl-color-primary-20: #{map.get($color, 'primary-20')};
  --ecl-color-secondary: #{map.get($color, 'secondary')};
  --ecl-color-secondary-180: #{map.get($color, 'secondary-180')};
  --ecl-color-secondary-160: #{map.get($color, 'secondary-160')};
  --ecl-color-secondary-140: #{map.get($color, 'secondary-140')};
  --ecl-color-secondary-120: #{map.get($color, 'secondary-120')};
  --ecl-color-secondary-100: #{map.get($color, 'secondary-100')};
  --ecl-color-secondary-80: #{map.get($color, 'secondary-80')};
  --ecl-color-secondary-60: #{map.get($color, 'secondary-60')};
  --ecl-color-secondary-40: #{map.get($color, 'secondary-40')};
  --ecl-color-secondary-20: #{map.get($color, 'secondary-20')};
  --ecl-color-dark: #{map.get($color, 'dark')};
  --ecl-color-dark-100: #{map.get($color, 'dark-100')};
  --ecl-color-dark-80: #{map.get($color, 'dark-80')};
  --ecl-color-dark-60: #{map.get($color, 'dark-60')};
  --ecl-color-info: #{map.get($color, 'info')};
  --ecl-color-success: #{map.get($color, 'success')};
  --ecl-color-error: #{map.get($color, 'error')};
  --ecl-color-warning: #{map.get($color, 'warning')};
  --ecl-color-background: #{map.get($color, 'background')};
  --ecl-color-branding: #{map.get($color, 'branding')};
  --ecl-color-stroke: color-mix(in srgb, var(--c-p) 50%, transparent);
  --ecl-color-overlay-light: color-mix(in srgb, var(--c-d) 70%, transparent);
  --ecl-color-overlay-dark: color-mix(in srgb, var(--c-d) 90%, transparent);
  --ecl-color-white: #{map.get($color, 'white')};
  --ecl-color-neutral: #{map.get($color, 'neutral-100')};
  --ecl-color-neutral-180: #{map.get($color, 'neutral-180')};
  --ecl-color-neutral-160: #{map.get($color, 'neutral-160')};
  --ecl-color-neutral-140: #{map.get($color, 'neutral-140')};
  --ecl-color-neutral-120: #{map.get($color, 'neutral-120')};
  --ecl-color-neutral-100: #{map.get($color, 'neutral-100')};
  --ecl-color-neutral-80: #{map.get($color, 'neutral-80')};
  --ecl-color-neutral-60: #{map.get($color, 'neutral-60')};
  --ecl-color-neutral-40: #{map.get($color, 'neutral-40')};
  --ecl-color-neutral-20: #{map.get($color, 'neutral-20')};
  --ecl-color-accent: #{map.get($color, 'accent')};
  --ecl-color-accent-160: #{map.get($color, 'accent-160')};
  --ecl-color-accent-140: #{map.get($color, 'accent-140')};
  --ecl-color-accent-120: #{map.get($color, 'accent-120')};
  --ecl-color-accent-100: #{map.get($color, 'accent-100')};
  --ecl-color-accent-80: #{map.get($color, 'accent-80')};
  --ecl-color-accent-60: #{map.get($color, 'accent-60')};
  --ecl-color-accent-40: #{map.get($color, 'accent-40')};
  --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-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-ui-s: #{map.get($font-ui, 's')};
  --ecl-font-ui-m: #{map.get($font-ui, 'm')};
  --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-shadow-1: #{map.get($shadow, '1')};
  --ecl-shadow-6: #{map.get($shadow, '6')};
  --ecl-shadow-12: #{map.get($shadow, '12')};
  --ecl-shadow-16: #{map.get($shadow, '16')};
  --ecl-max-width: #{$max-width};

  // Aliases (internal use)
  --c-p: var(--ecl-color-primary);
  --c-p-180: var(--ecl-color-primary-180);
  --c-p-160: var(--ecl-color-primary-160);
  --c-p-140: var(--ecl-color-primary-140);
  --c-p-120: var(--ecl-color-primary-120);
  --c-p-100: var(--ecl-color-primary-100);
  --c-p-80: var(--ecl-color-primary-80);
  --c-p-60: var(--ecl-color-primary-60);
  --c-p-40: var(--ecl-color-primary-40);
  --c-p-20: var(--ecl-color-primary-20);
  --c-s: var(--ecl-color-secondary);
  --c-s-180: var(--ecl-color-secondary-180);
  --c-s-160: var(--ecl-color-secondary-160);
  --c-s-140: var(--ecl-color-secondary-140);
  --c-s-120: var(--ecl-color-secondary-120);
  --c-s-100: var(--ecl-color-secondary-100);
  --c-s-80: var(--ecl-color-secondary-80);
  --c-s-60: var(--ecl-color-secondary-60);
  --c-s-40: var(--ecl-color-secondary-40);
  --c-s-20: var(--ecl-color-secondary-20);
  --c-d: var(--ecl-color-dark);
  --c-d-100: var(--ecl-color-dark-100);
  --c-d-80: var(--ecl-color-dark-80);
  --c-d-60: var(--ecl-color-dark-60);
  --c-in: var(--ecl-color-info);
  --c-su: var(--ecl-color-success);
  --c-er: var(--ecl-color-error);
  --c-wa: var(--ecl-color-warning);
  --c-bg: var(--ecl-color-background);
  --c-br: var(--ecl-color-branding);
  --c-st: var(--ecl-color-stroke);
  --c-ov-l: var(--ecl-color-overlay-light);
  --c-ov-d: var(--ecl-color-overlay-dark);
  --c-n: var(--ecl-color-neutral);
  --c-n-180: var(--ecl-color-neutral-180);
  --c-n-160: var(--ecl-color-neutral-160);
  --c-n-140: var(--ecl-color-neutral-140);
  --c-n-120: var(--ecl-color-neutral-120);
  --c-n-100: var(--ecl-color-neutral-100);
  --c-n-80: var(--ecl-color-neutral-80);
  --c-n-60: var(--ecl-color-neutral-60);
  --c-n-40: var(--ecl-color-neutral-40);
  --c-n-20: var(--ecl-color-neutral-20);
  --c-a: var(--ecl-color-accent);
  --c-a-160: var(--ecl-color-accent-160);
  --c-a-140: var(--ecl-color-accent-140);
  --c-a-120: var(--ecl-color-accent-120);
  --c-a-100: var(--ecl-color-accent-100);
  --c-a-80: var(--ecl-color-accent-80);
  --c-a-60: var(--ecl-color-accent-60);
  --c-a-40: var(--ecl-color-accent-40);
  --ff-d: var(--ecl-font-family-default);
  --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-ui-s: var(--ecl-font-ui-s);
  --f-ui-m: var(--ecl-font-ui-m);
  --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);
  --sh-1: var(--ecl-shadow-1);
  --sh-6: var(--ecl-shadow-6);
  --sh-12: var(--ecl-shadow-12);
  --sh-16: var(--ecl-shadow-16);
  --max-w: var(--ecl-max-width);
}
