:root {
  /* Custom Gray Scale */
  --gray-100: #FDFDFE;
  --gray-200: #DEDEE0;
  --gray-300: #71717A;
  --gray-600: #363638;
  --gray-800: #1F1F21;
  --gray-900: #161618;
}

/* Tailwind CSS Custom Colors */
@layer base {
  .text-gray-100 { color: var(--gray-100); }
  .text-gray-200 { color: var(--gray-200); }
  .text-gray-300 { color: var(--gray-300); }
  .text-gray-600 { color: var(--gray-600); }
  .text-gray-800 { color: var(--gray-800); }
  .text-gray-900 { color: var(--gray-900); }
  
  .bg-gray-100 { background-color: var(--gray-100); }
  .bg-gray-200 { background-color: var(--gray-200); }
  .bg-gray-300 { background-color: var(--gray-300); }
  .bg-gray-600 { background-color: var(--gray-600); }
  .bg-gray-800 { background-color: var(--gray-800); }
  .bg-gray-900 { background-color: var(--gray-900); }
  
  .border-gray-100 { border-color: var(--gray-100); }
  .border-gray-200 { border-color: var(--gray-200); }
  .border-gray-300 { border-color: var(--gray-300); }
  .border-gray-600 { border-color: var(--gray-600); }
  .border-gray-800 { border-color: var(--gray-800); }
  .border-gray-900 { border-color: var(--gray-900); }
}