@import './custom-query';

// TODO: Setup only the CSS props we actually need here
// potentially see if our compiler can automatically remove
// unused CSS props
:root {
  --white: #{$white};
  --decor-border-100: #{$decor-border-100};
  --decor-radius-200: #{$decor-radius-200};
  --gray-500: #{$gray-500};
  --decor-elevation-600: #{$decor-elevation-600};

  /* base brand colors */
  --brand-050: #{$magenta-050};
  // --brand-100: #{$magenta-100};
  // --brand-200: #{$magenta-200};
  // --brand-300: #{$magenta-300};
  // --brand-400: #{$magenta-400};
  // --brand-500: #{$magenta-500};
  --brand-600: #{$magenta-600};
  // --brand-700: #{$magenta-700};
  --brand-800: #{$magenta-800};
  // --brand-900: #{$magenta-900};

  /* themeable ui colors */
  --typo-action-500: #{$blue-500};
  --decor-error-500: #{$red-500};
  --typo-contrast-999: #{$black};

  /* themeable brand colors */
  --typo-brand-050: var(--brand-050);
  --typo-brand-600: var(--brand-600);
  --decor-brand-600: var(--brand-600);
  --swatch-brand-600: var(--brand-600);
  --swatch-brand-800: var(--brand-800);
}