:root {
  --theme-color-sky-50: #E2F1FE;
  --theme-color-sky-100: #B1D9FC;
  --theme-color-sky-200: #80C1F9;
  --theme-color-sky-300: #4FA9F7;
  --theme-color-sky-400: #1D90F5;
  --theme-color-sky-500: #0A77D7;
  --theme-color-sky-600: #075CA6;
  --theme-color-sky-700: #054175;
  --theme-color-sky-800: #032644;

  --theme-color-apricot-50: #FFF4E7;
  --theme-color-apricot-100: #FFE4C4;
  --theme-color-apricot-200: #FFC788;
  --theme-color-apricot-300: #FFAE51;
  --theme-color-apricot-400: #FF8E0D;
  --theme-color-apricot-500: #E57A00;
  --theme-color-apricot-600: #BA6300;
  --theme-color-apricot-700: #965000;
  --theme-color-apricot-800: #5B3100;

  --theme-color-white: #FFFFFF;
  --theme-color-gray-100: #CFCFD3;
  --theme-color-gray-200: #A0A0A7;
  --theme-color-gray-300: #71717A;
  --theme-color-gray-400: #45454A;
  --theme-color-gray-500: #18181A;
  --theme-color-gray-600: #141415;
  --theme-color-gray-700: #0F0F10;
  --theme-color-gray-800: #0A0A0B;
  --theme-color-black: #050505;
}
html{ 
& .theme-text-sky-50 { color: var(--theme-color-sky-50); }
& .theme-bg-sky-50 { background-color: var(--theme-color-sky-50); }

& .theme-text-sky-100 { color: var(--theme-color-sky-100); }
& .theme-bg-sky-100 { background-color: var(--theme-color-sky-100); }

& .theme-text-sky-200 { color: var(--theme-color-sky-200); }
& .theme-bg-sky-200 { background-color: var(--theme-color-sky-200); }

& .theme-text-sky-300 { color: var(--theme-color-sky-300); }
& .theme-bg-sky-300 { background-color: var(--theme-color-sky-300); }

& .theme-text-sky-400 { color: var(--theme-color-sky-400); }
& .theme-bg-sky-400 { background-color: var(--theme-color-sky-400); }

& .theme-text-sky-500 { color: var(--theme-color-sky-500); }
& .theme-bg-sky-500 { background-color: var(--theme-color-sky-500); }

& .theme-text-sky-600 { color: var(--theme-color-sky-600); }
& .theme-bg-sky-600 { background-color: var(--theme-color-sky-600); }

& .theme-text-sky-700 { color: var(--theme-color-sky-700); }
& .theme-bg-sky-700 { background-color: var(--theme-color-sky-700); }

& .theme-text-sky-800 { color: var(--theme-color-sky-800); }
& .theme-bg-sky-800 { background-color: var(--theme-color-sky-800); }

& .theme-text-apricot-50 { color: var(--theme-color-apricot-50); }
& .theme-bg-apricot-50 { background-color: var(--theme-color-apricot-50); }

& .theme-text-apricot-100 { color: var(--theme-color-apricot-100); }
& .theme-bg-apricot-100 { background-color: var(--theme-color-apricot-100); }

& .theme-text-apricot-200 { color: var(--theme-color-apricot-200); }
& .theme-bg-apricot-200 { background-color: var(--theme-color-apricot-200); }

& .theme-text-apricot-300 { color: var(--theme-color-apricot-300); }
& .theme-bg-apricot-300 { background-color: var(--theme-color-apricot-300); }

& .theme-text-apricot-400 { color: var(--theme-color-apricot-400); }
& .theme-bg-apricot-400 { background-color: var(--theme-color-apricot-400); }

& .theme-text-apricot-500 { color: var(--theme-color-apricot-500); }
.theme-bg-apricot-500 { background-color: var(--theme-color-apricot-500); }

& .theme-text-apricot-600 { color: var(--theme-color-apricot-600); }
& .theme-bg-apricot-600 { background-color: var(--theme-color-apricot-600); }

& .theme-text-apricot-700 { color: var(--theme-color-apricot-700); }
& .theme-bg-apricot-700 { background-color: var(--theme-color-apricot-700); }

& .theme-text-apricot-800 { color: var(--theme-color-apricot-800); }
& .theme-bg-apricot-800 { background-color: var(--theme-color-apricot-800); }

& .theme-text-white { color: var(--theme-color-white); }
& .theme-bg-white { background-color: var(--theme-color-white); }

& .theme-text-gray-100 { color: var(--theme-color-gray-100); }
& .theme-bg-gray-100 { background-color: var(--theme-color-gray-100); }

& .theme-text-gray-200 { color: var(--theme-color-gray-200); }
& .theme-bg-gray-200 { background-color: var(--theme-color-gray-200); }

& .theme-text-gray-300 { color: var(--theme-color-gray-300); }
& .theme-bg-gray-300 { background-color: var(--theme-color-gray-300); }

& .theme-text-gray-400 { color: var(--theme-color-gray-400); }
& .theme-bg-gray-400 { background-color: var(--theme-color-gray-400); }

& .theme-text-gray-500 { color: var(--theme-color-gray-500); }
& .theme-bg-gray-500 { background-color: var(--theme-color-gray-500); }

& .theme-text-gray-600 { color: var(--theme-color-gray-600); }
& .theme-bg-gray-600 { background-color: var(--theme-color-gray-600); }

& .theme-text-gray-700 { color: var(--theme-color-gray-700); }
& .theme-bg-gray-700 { background-color: var(--theme-color-gray-700); }

& .theme-text-gray-800 { color: var(--theme-color-gray-800); }
& .theme-bg-gray-800 { background-color: var(--theme-color-gray-800); }

& .theme-text-black { color: var(--theme-color-black); }
& .theme-bg-black { background-color: var(--theme-color-black); }
}