:root {
  // Brand Colors
  --color-primary-blue: #{$primary-blue};
  --color-primary-yellow: #{$primary-yellow};
  --color-text: #{$text-color};
  --color-background: #{$background-color};

  // Semantic colors
  --text: #2c2a26;
  --background: #f5f3f0;
  --primary: #296eb3;
  --secondary: #fdba35;
  --accent: #188afb;

  // UI Elements
  --link-color: #{$primary-blue};
  --link-hover-color: #{darken($primary-blue, 10%)};

  // Data Visualization Colors
  --dataviz-cat-1: #{$dataviz-cat-1};
  --dataviz-cat-2: #{$dataviz-cat-2};
  --dataviz-cat-3: #{$dataviz-cat-3};
  --dataviz-cat-4: #{$dataviz-cat-4};
  --dataviz-cat-5: #{$dataviz-cat-5};
  --dataviz-cat-6: #{$dataviz-cat-6};
  --dataviz-cat-7: #{$dataviz-cat-7};
  --dataviz-cat-8: #{$dataviz-cat-8};
}

// Apply colors
body {
  background-color: var(--color-background);
  color: var(--color-text);
}

a {
  color: var(--link-color);
  text-decoration: none;

  &:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
  }
}