/* custom-theme.css */

/* === Centralized RGBA Color Variables === */
:root {
  --color-blue:       rgba(0, 119, 204, 0.9);
  --color-indigo:     rgba(102, 16, 242, 1);
  --color-purple:     rgba(111, 66, 193, 1);
  --color-pink:       rgba(214, 51, 132, 1);
  --color-red:        rgba(220, 53, 69, 1);
  --color-orange:     rgba(253, 126, 20, 1);
  --color-yellow:     rgba(255, 193, 7, 1);
  --color-green:      rgba(25, 135, 84, 1);
  --color-teal:       rgba(32, 201, 151, 1);
  --color-cyan:       rgba(13, 202, 240, 1);
  --color-black:      rgba(0, 0, 0, 1);
  --color-white:      rgba(255, 255, 255, 1);
  --color-gray:       rgba(108, 117, 125, 1);
  --color-gray-dark:  rgba(52, 58, 64, 1);
  --color-gray-100:   rgba(248, 249, 250, 1);
  --color-gray-200:   rgba(233, 236, 239, 1);
  --color-gray-300:   rgba(222, 226, 230, 1);
  --color-gray-400:   rgba(206, 212, 218, 1);
  --color-gray-500:   rgba(173, 181, 189, 1);
  --color-gray-600:   rgba(108, 117, 125, 1);
  --color-gray-700:   rgba(73, 80, 87, 1);
  --color-gray-800:   rgba(52, 58, 64, 1);
  --color-gray-900:   #1c1f26;
  --color-gray-1000:  #0e1217;
}

/* === Background Utilities === */
.bg-blue       { background-color: var(--color-blue) !important; }
.bg-indigo     { background-color: var(--color-indigo) !important; }
.bg-purple     { background-color: var(--color-purple) !important; }
.bg-pink       { background-color: var(--color-pink) !important; }
.bg-red        { background-color: var(--color-red) !important; }
.bg-orange     { background-color: var(--color-orange) !important; }
.bg-yellow     { background-color: var(--color-yellow) !important; }
.bg-green      { background-color: var(--color-green) !important; }
.bg-teal       { background-color: var(--color-teal) !important; }
.bg-cyan       { background-color: var(--color-cyan) !important; }
.bg-black      { background-color: var(--color-black) !important; }
.bg-white      { background-color: var(--color-white) !important; }
.bg-gray       { background-color: var(--color-gray) !important; }
.bg-gray-dark  { background-color: var(--color-gray-dark) !important; }
.bg-gray-100   { background-color: var(--color-gray-100) !important; }
.bg-gray-200   { background-color: var(--color-gray-200) !important; }
.bg-gray-300   { background-color: var(--color-gray-300) !important; }
.bg-gray-400   { background-color: var(--color-gray-400) !important; }
.bg-gray-500   { background-color: var(--color-gray-500) !important; }
.bg-gray-600   { background-color: var(--color-gray-600) !important; }
.bg-gray-700   { background-color: var(--color-gray-700) !important; }
.bg-gray-800   { background-color: var(--color-gray-800) !important; }
.bg-gray-900   { background-color: var(--color-gray-900) !important; }
.bg-gray-1000  { background-color: var(--color-gray-1000) !important; }

/* === Text Utilities === */
.text-blue       { color: var(--color-blue) !important; }
.text-indigo     { color: var(--color-indigo) !important; }
.text-purple     { color: var(--color-purple) !important; }
.text-pink       { color: var(--color-pink) !important; }
.text-red        { color: var(--color-red) !important; }
.text-orange     { color: var(--color-orange) !important; }
.text-yellow     { color: var(--color-yellow) !important; }
.text-green      { color: var(--color-green) !important; }
.text-teal       { color: var(--color-teal) !important; }
.text-cyan       { color: var(--color-cyan) !important; }
.text-black      { color: var(--color-black) !important; }
.text-white      { color: var(--color-white) !important; }
.text-gray       { color: var(--color-gray) !important; }
.text-gray-dark  { color: var(--color-gray-dark) !important; }
.text-gray-100   { color: var(--color-gray-100) !important; }
.text-gray-200   { color: var(--color-gray-200) !important; }
.text-gray-300   { color: var(--color-gray-300) !important; }
.text-gray-400   { color: var(--color-gray-400) !important; }
.text-gray-500   { color: var(--color-gray-500) !important; }
.text-gray-600   { color: var(--color-gray-600) !important; }
.text-gray-700   { color: var(--color-gray-700) !important; }
.text-gray-800   { color: var(--color-gray-800) !important; }
.text-gray-900   { color: var(--color-gray-900) !important; }
.text-gray-1000  { color: var(--color-gray-1000) !important; }

/* === Text Glow Utilities === */
.text-glow-blue       { color: var(--color-blue) !important; text-shadow: 0 0 4px var(--color-blue); }
.text-glow-indigo     { color: var(--color-indigo) !important; text-shadow: 0 0 4px var(--color-indigo); }
.text-glow-purple     { color: var(--color-purple) !important; text-shadow: 0 0 4px var(--color-purple); }
.text-glow-pink       { color: var(--color-pink) !important; text-shadow: 0 0 4px var(--color-pink); }
.text-glow-red        { color: var(--color-red) !important; text-shadow: 0 0 4px var(--color-red); }
.text-glow-orange     { color: var(--color-orange) !important; text-shadow: 0 0 4px var(--color-orange); }
.text-glow-yellow     { color: var(--color-yellow) !important; text-shadow: 0 0 4px var(--color-yellow); }
.text-glow-green      { color: var(--color-green) !important; text-shadow: 0 0 4px var(--color-green); }
.text-glow-teal       { color: var(--color-teal) !important; text-shadow: 0 0 4px var(--color-teal); }
.text-glow-cyan       { color: var(--color-cyan) !important; text-shadow: 0 0 4px var(--color-cyan); }
.text-glow-black      { color: var(--color-black) !important; text-shadow: 0 0 4px var(--color-black); }
.text-glow-white      { color: var(--color-white) !important; text-shadow: 0 0 4px var(--color-white); }
.text-glow-gray       { color: var(--color-gray) !important; text-shadow: 0 0 4px var(--color-gray); }
.text-glow-gray-dark  { color: var(--color-gray-dark) !important; text-shadow: 0 0 4px var(--color-gray-dark); }
.text-glow-gray-100   { color: var(--color-gray-100) !important; text-shadow: 0 0 4px var(--color-gray-100); }
.text-glow-gray-200   { color: var(--color-gray-200) !important; text-shadow: 0 0 4px var(--color-gray-200); }
.text-glow-gray-300   { color: var(--color-gray-300) !important; text-shadow: 0 0 4px var(--color-gray-300); }
.text-glow-gray-400   { color: var(--color-gray-400) !important; text-shadow: 0 0 4px var(--color-gray-400); }
.text-glow-gray-500   { color: var(--color-gray-500) !important; text-shadow: 0 0 4px var(--color-gray-500); }