Radix Scale Builder

:root {
  --blue-1: hsl(210, 30%, 98.5%);
  --blue-2: hsl(210, 45%, 97%);
  --blue-3: hsl(210, 55%, 94%);
  --blue-4: hsl(210, 60%, 90%);
  --blue-5: hsl(210, 65%, 84%);
  --blue-6: hsl(210, 68%, 76%);
  --blue-7: hsl(210, 72%, 65%);
  --blue-8: hsl(210, 78%, 55%);
  --blue-9: hsl(210, 82%, 45%);
  --blue-10: hsl(210, 85%, 38%);
  --blue-11: hsl(210, 80%, 28%);
  --blue-12: hsl(210, 70%, 16%);
}

.dark {
  --blue-1: hsl(210, 15%, 10%);
  --blue-2: hsl(210, 30%, 13%);
  --blue-3: hsl(210, 40%, 17%);
  --blue-4: hsl(210, 45%, 22%);
  --blue-5: hsl(210, 50%, 28%);
  --blue-6: hsl(210, 53%, 36%);
  --blue-7: hsl(210, 57%, 48%);
  --blue-8: hsl(210, 63%, 58%);
  --blue-9: hsl(210, 67%, 68%);
  --blue-10: hsl(210, 70%, 72%);
  --blue-11: hsl(210, 65%, 78%);
  --blue-12: hsl(210, 55%, 88%);
}

/* Usage: --blue-1 (background) → --blue-12 (high contrast text) */
/* Radix scale semantics:
   1-2: App background  3-5: Component  6-8: Borders  9-10: Solid  11-12: Text */