Brand Color System Generator

:root {
  /* Brand Shades */
  --brand-50: #fffbf0;
  --brand-100: #fff7e0;
  --brand-200: #ffecb8;
  --brand-300: #ffdc7a;
  --brand-400: #ffc933;
  --brand-500: #f5b400;
  --brand-600: #cc9600;
  --brand-700: #a37800;
  --brand-800: #7a5a00;
  --brand-900: #523c00;
  /* Complementary */
  --complementary: #0041f5;
  --complementary-light: #b8cbff;
  --complementary-dark: #00217a;
  /* Analogous */
  --analogous-1: #f53900;
  --brand: #f5b400;
  --analogous-2: #bcf500;
  --analogous-3: #41f500;
  /* Triadic */
  --triadic-1: #f5b400;
  --triadic-2: #00f5b4;
  --triadic-3: #b400f5;
  /* Semantic */
  --success: #20c55d;
  --success-light: #d3f8e1;
  --warning: #f59f0a;
  --warning-light: #fdecce;
  --error: #db2424;
  --error-light: #f9dcdc;
  --info: #249edb;
  --info-light: #dcebf9;

  /* Dark Mode */
  /* Dark Mode Shades */
  --brand-dark-50: #271d02;
  --brand-dark-100: #271d02;
  --brand-dark-200: #443304;
  --brand-dark-300: #7e5e07;
  --brand-dark-400: #c2910a;
  --brand-dark-500: #f3b816;
  --brand-dark-600: #f5c43d;
  --brand-dark-700: #f7d064;
  --brand-dark-800: #f9dc8b;
  --brand-dark-900: #fbe7b1;
  /* Dark Mode Semantic */
  --dark-success: #5cd689;
  --dark-warning: #f2ba5a;
  --dark-error: #db5757;
  --dark-info: #5799db;
}