@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 {
  /* base brand colors */
  --brand-050: var(--tone-magenta-050);
  --brand-100: var(--tone-strawberry-100);
  // rgb(var(--brand-200)): #{rgb(var(--tone-magenta-200))};
  // rgb(var(--brand-300)): #{rgb(var(--tone-magenta-300))};
  // rgb(var(--brand-400)): #{rgb(var(--tone-magenta-400))};
  // rgb(var(--brand-500)): #{rgb(var(--tone-magenta-500))};
  /* temporary rose-like color until its replaced by a numbered one */
  --brand-600: 224 56 117;
  // rgb(var(--brand-700)): #{rgb(var(--tone-magenta-700))};
  --brand-800: var(--tone-magenta-800);
  // rgb(var(--brand-900)): #{rgb(var(--tone-magenta-900))};

  /* themeable ui colors */
  --typo-action-500: var(--tone-blue-500);
  --decor-error-500: var(--tone-red-500);
  --typo-contrast-999: var(--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);
}