olehomelchenko.com/scss/_dataviz.scss

// Sequential color ramps
// Blue sequential (5 steps from light to dark)
:root {
  --dataviz-blue-seq-1: #e6f2ff;
  --dataviz-blue-seq-2: #9bccfd;
  --dataviz-blue-seq-3: #3699fc;
  --dataviz-blue-seq-4: #047ffb;
  --dataviz-blue-seq-5: #024c97;

  // Yellow sequential (5 steps)
  --dataviz-yellow-seq-1: #fff6e6;
  --dataviz-yellow-seq-2: #fedd9a;
  --dataviz-yellow-seq-3: #fdba35;
  --dataviz-yellow-seq-4: #ca8702;
  --dataviz-yellow-seq-5: #654401;

  // Diverging scale (blue ↔ neutral ↔ yellow)
  --dataviz-diverging-1: #296EB4;
  --dataviz-diverging-2: #9FDFDC;
  --dataviz-diverging-3: #f5f3f0;
  --dataviz-diverging-4: #FDB833;
  --dataviz-diverging-5: #fca903;
}

// Categorical color utility classes (for future use)
.dataviz-cat-1 { color: $dataviz-cat-1; }
.dataviz-cat-2 { color: $dataviz-cat-2; }
.dataviz-cat-3 { color: $dataviz-cat-3; }
.dataviz-cat-4 { color: $dataviz-cat-4; }
.dataviz-cat-5 { color: $dataviz-cat-5; }
.dataviz-cat-6 { color: $dataviz-cat-6; }
.dataviz-cat-7 { color: $dataviz-cat-7; }
.dataviz-cat-8 { color: $dataviz-cat-8; }

.dataviz-cat-bg-1 { background-color: $dataviz-cat-1; }
.dataviz-cat-bg-2 { background-color: $dataviz-cat-2; }
.dataviz-cat-bg-3 { background-color: $dataviz-cat-3; }
.dataviz-cat-bg-4 { background-color: $dataviz-cat-4; }
.dataviz-cat-bg-5 { background-color: $dataviz-cat-5; }
.dataviz-cat-bg-6 { background-color: $dataviz-cat-6; }
.dataviz-cat-bg-7 { background-color: $dataviz-cat-7; }
.dataviz-cat-bg-8 { background-color: $dataviz-cat-8; }

/*
 * Data Visualization Color System
 *
 * Categorical (8 colors): Use .dataviz-cat-1 through .dataviz-cat-8
 * Sequential Blue: var(--dataviz-blue-seq-1) through var(--dataviz-blue-seq-5)
 * Sequential Yellow: var(--dataviz-yellow-seq-1) through var(--dataviz-yellow-seq-5)
 * Diverging: var(--dataviz-diverging-1) through var(--dataviz-diverging-5)
 *
 * All colors are colorblind-safe as per brand guidelines.
 */