@import '../variables.css';

:root {
  /* skin variables */
  --skin-color-primary: var(--ui-blue);
  --skin-color-primary-light: var(--ui-color-blue-500);
  --skin-color-primary-lighter: var(--ui-color-blue-100);
  --skin-color-primary-shade: var(--ui-color-blue-800);
  --skin-color-primary-inverted: var(--ui-color-white);
  --skin-color-primary-light-inverted: var(--ui-color-white);
  --skin-color-primary-shade-inverted: var(--ui-color-blue-400);
  --skin-color-accent: var(--ui-green);
  --skin-color-accent-light: var(--ui-color-green-300);
  --skin-color-accent-shade: var(--ui-color-green-500);
  --skin-color-accent-inverted: var(--ui-color-white);
  --skin-color-text: var(--ui-color-dark);
  --skin-color-text-inverted: var(--ui-color-white);
  --skin-color-white: var(--ui-color-white);
  --skin-color-secondary: var(--ui-grey);
  --skin-color-secondary-light: var(--ui-color-grey-200);
  --skin-color-secondary-lighter: var(--ui-color-grey-100);
  --skin-font-family-primary: var(--ui-font-family-sans-serif);
  --skin-font-family-accent: var(--ui-font-family-handwriting);
  --skin-font-size-base: var(--ui-font-size-base);

  /* current variables */
  --current-color-primary: var(--skin-color-primary);
  --current-color-primary-inverted: var(--skin-color-primary-inverted);
  --current-color-primary-light: var(--skin-color-primary-light);
  --current-color-primary-light-inverted: var(--skin-color-primary-light-inverted);
  --current-color-primary-shade: var(--skin-color-primary-shade);
  --current-color-primary-shade-inverted: var(--skin-color-primary-shade-inverted);
  --current-color-accent: var(--skin-color-accent);
  --current-color-text: var(--skin-color-text);
  --current-color-inverted: var(--skin-color-text-inverted);
}