@tailwind base;

@layer base {
  :root {
    --white: 0, 0%, 100%; /* #ffffff */
    --gray-50: 0, 0%, 97%; /* #f7f7f7 */
    --gray-100: 0, 0%, 95%; /* #f2f2f2 */
    --gray-200: 0, 4%, 86%; /* #dedbdb */
    --gray-300: 0, 1%, 71%; /* #b5b4b4 */
    --gray-400: 0, 0%, 55%; /* #8c8c8c */
    --gray-500: 0, 0%, 38%; /* #616161 */
    --gray-600: 0, 0%, 28%; /* #464646 */
    --gray-700: 0, 0%, 19%; /* #313131 */
    --gray-800: 0, 0%, 12%; /* #1e1e1e */
    --gray-900: 0, 0%, 8%; /* #141414 */
    --black: 0, 0%, 0%; /* #000000 */

    --green-50: 144, 83%, 97%; /* #f1fffa */
    --green-100: 158, 81%, 94%; /* #e3fcf3 */
    --green-200: 144, 75%, 89%; /* #cdf8de */
    --green-300: 144, 67%, 80%; /* #aaeec5 */
    --green-400: 144, 70%, 68%; /* #75e7a2 */
    --green-500: 144, 77%, 52%; /* #25e270 */
    --green-600: 144, 99%, 34%; /* #01aa44 */
    --green-700: 144, 99%, 22%; /* #01722e */
    --green-800: 144, 98%, 13%; /* #013f1a */
    --green-900: 144, 99%, 7%; /* #00260f */
    --green-950: 144, 95%, 5%; /* #011409 */

    --blue-100: 193, 100%, 96%; /* #ecfbff */
    --blue-200: 158, 82%, 89%; /* #cefaea */
    --blue-300: 176, 95%, 81%; /* #a2fdf7 */
    --blue-400: 180, 78%, 68%; /* #70eded */
    --blue-500: 176, 54%, 52%; /* #41c6be */
    --blue-600: 173, 47%, 33%; /* #2d7d73 */
    --blue-700: 180, 59%, 20%; /* #155252 */
    --blue-800: 187, 77%, 11%; /* #072c31 */
    --blue-900: 184, 82%, 6%; /* #031c1e */

    --teal-100: 186, 60%, 90%; /* #ccfbf1 */
    --teal-200: 186, 73%, 85%; /* #99f6e4 */
    --teal-800: 186, 54%, 21%; /* #1B575C */
    --teal-900: 186, 78%, 9%; /* #06282A */
  }
}
