/* ===========================================
 Gray Scale Color System (From Screenshot)
 =========================================== */

:root {
  /* Consistent Base Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --Gray-Consistent-White: #ffffff; /* Consistent White */
  
  /* Gray Scale (0-900) - Based on your design system */
  --color-gray-0: #F7F8F9;      /* White */
  --color-gray-100: #F1F2F4;    /* Very Light Gray */
  --color-gray-200: #E9EBEE;    /* Light Gray */
  --color-gray-300: #D0D6DB;    /* Medium Light Gray */
  --color-gray-400: #C5C8CE;    /* Medium Gray */
  --color-gray-500: #ACB4BB;    /* Neutral Gray */
  --color-gray-600: #646F7C;    /* Medium Dark Gray */
  --color-gray-700: #374553;    /* Dark Gray */
  --color-gray-800: #28323C;    /* Very Dark Gray */
  --color-gray-900: #161D24;    /* Almost Black */
  /* CTA Colors */
  --CTA-1-Default: #1B2334; 
}

/* ===========================================
 Utility Classes for Gray Colors
 =========================================== */

/* Background Colors */
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-gray-0 { background-color: var(--color-gray-0); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }

/* Text Colors */
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-gray-0 { color: var(--color-gray-0); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }
.text-cta-1-default { color: var(--CTA-1-Default) } 

/* Border Colors */
.border-white { border-color: var(--color-white); }
.border-black { border-color: var(--color-black); }
.border-gray-0 { border-color: var(--color-gray-0); }
.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-gray-500 { border-color: var(--color-gray-500); }
.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-700 { border-color: var(--color-gray-700); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-gray-900 { border-color: var(--color-gray-900); }