Website Theming Tool

:root {

  /* ─── Primary ─── */
  --primary-50: hsl(240 75% 97%);
  --primary-100: hsl(240 75% 93%);
  --primary-200: hsl(240 75% 86%);
  --primary-300: hsl(240 75% 76%);
  --primary-400: hsl(240 75% 65%);
  --primary-500: hsl(240 75% 54%);
  --primary-600: hsl(240 75% 44%);
  --primary-700: hsl(240 75% 34%);
  --primary-800: hsl(240 75% 24%);
  --primary-900: hsl(240 75% 15%);

  /* ─── Secondary ─── */
  --secondary-50: hsl(60 75% 97%);
  --secondary-100: hsl(60 75% 93%);
  --secondary-200: hsl(60 75% 86%);
  --secondary-300: hsl(60 75% 76%);
  --secondary-400: hsl(60 75% 65%);
  --secondary-500: hsl(60 75% 54%);
  --secondary-600: hsl(60 75% 44%);
  --secondary-700: hsl(60 75% 34%);
  --secondary-800: hsl(60 75% 24%);
  --secondary-900: hsl(60 75% 15%);

  /* ─── Buttons ─── */
  --btn-primary-bg:       hsl(240 75% 54%);
  --btn-primary-hover:    hsl(240 75% 47%);
  --btn-primary-active:   hsl(240 75% 40%);
  --btn-primary-text:     hsl(0 0% 100%);
  --btn-focus-ring:       hsla(240, 75%, 54%, 0.22);

  --btn-secondary-bg:     hsl(60 75% 54%);
  --btn-secondary-hover:  hsl(60 75% 47%);
  --btn-secondary-active: hsl(60 75% 40%);
  --btn-secondary-text:   hsl(0 0% 100%);

  /* ─── Backgrounds ─── */
  --bg-page:      hsl(240 11% 97%);
  --bg-surface:   hsl(240 6% 100%);
  --bg-card:      hsl(240 6% 99%);
  --bg-hover:     hsl(240 11% 94%);
  --bg-affix:     hsl(240 11% 97%);

  /* ─── Borders ─── */
  --border:        hsl(240 23% 88%);
  --border-subtle: hsl(240 23% 93%);

  /* ─── Typography ─── */
  --text-primary: hsl(240 19% 12%);
  --text-muted:   hsl(240 11% 46%);
  --text-subtle:  hsl(240 11% 65%);

  /* ─── Success ─── */
  --success-bg:     hsl(150 60% 97%);
  --success-border: hsl(150 60% 86%);
  --success-500:    hsl(150 60% 54%);
  --success-text:   hsl(150 60% 34%);
  --success-dark:   hsl(150 60% 24%);

  /* ─── Warning (derived from secondary) ─── */
  --warning-bg:     var(--secondary-50);
  --warning-border: var(--secondary-200);
  --warning-500:    var(--secondary-500);
  --warning-text:   var(--secondary-700);
  --warning-dark:   var(--secondary-800);

  /* ─── Error ─── */
  --error-bg:     hsl(0 75% 97%);
  --error-border: hsl(0 75% 86%);
  --error-500:    hsl(0 75% 54%);
  --error-text:   hsl(0 75% 34%);
  --error-dark:   hsl(0 75% 24%);

  /* ─── Series (chart colors) ─── */
  --series-1: hsl(240 75% 54%);
  --series-2: hsl(300 75% 54%);
  --series-3: hsl(0 75% 54%);
  --series-4: hsl(60 75% 54%);
  --series-5: hsl(120 75% 54%);
  --series-6: hsl(180 75% 54%);
  --series-7: hsl(270 75% 54%);
  --series-8: hsl(330 75% 54%);
  --series-9: hsl(30 75% 54%);
  --series-10: hsl(90 75% 54%);
  --series-11: hsl(150 75% 54%);
  --series-12: hsl(210 75% 54%);

}