@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .force-white-text {
    color: rgb(var(--color-white)) !important;
  }

  .bg-gradient-primary {
    background-image: linear-gradient(to right, var(--gradient-primary));
  }

  .bg-gradient-neovim {
    background-image: linear-gradient(
      to right,
      theme('colors.cyan.500'),
      theme('colors.green.500')
    );
  }

  .bg-gradient-gruvbox {
    background-image: linear-gradient(
      to right,
      theme('colors.red.500'),
      theme('colors.orange.500')
    );
  }

  .bg-gradient-tokyonight {
    background-image: linear-gradient(
      to right,
      theme('colors.purple.500'),
      theme('colors.blue.500')
    );
  }
  .bg-gradient-rose-pine {
    background-image: linear-gradient(
      to right,
      theme('colors.pink.500'),
      theme('colors.amber.500')
    );
  }
}

#nprogress .bar {
  @apply bg-secondary;
}

@layer base {
  body {
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    background-image: linear-gradient(to right, var(--background-gradient));
  }

  html {
    color-scheme: dark;
    --background-gradient: theme('colors.stone.950'), theme('colors.slate.900');
    --gradient-dark: theme('colors.neutral.950'), theme('colors.slate.950');
    /* --gradient-primary: theme('colors.cyan.500'), theme('colors.green.500'); */
    /* --color-main: 255 0 0; */
    /* --color-secondary: 6 182 212; */
    --color-white: 255 255 255;
    --color-black: 0 0 0;
    --color-accent-muted: 107 114 128;
    --color-accent-bright: 243 244 246;
    --gradient-primary: 255 255 255;

    /* Tailwind gray 950 -> 950  */
    --color-base-50: 249 250 251;
    --color-base-100: 243 244 246;
    --color-base-200: 229 231 235;
    --color-base-300: 209 213 219;
    --color-base-400: 156 163 175;
    --color-base-500: 107 114 128;
    --color-base-600: 75 85 99;
    --color-base-700: 55 65 81;
    --color-base-800: 31 41 55;
    --color-base-900: 17 24 39;
    --color-base-950: 3 7 18;
  }

  html.light {
    color-scheme: light;
    --gradient-primary: 0 0 0;
    --background-gradient: theme('colors.neutral.100'), theme('colors.slate.100');

    --color-white: 0 0 0;
    --color-black: 255 255 255;
    --color-accent-muted: 107 114 128;
    --color-accent-bright: 0 0 0;

    /* Tailwind gray 950 -> 50 */
    --color-base-950: 249 250 251;
    --color-base-900: 243 244 246;
    --color-base-800: 229 231 235;
    --color-base-700: 209 213 219;
    --color-base-600: 156 163 175;
    --color-base-500: 107 114 128;
    --color-base-400: 75 85 99;
    --color-base-300: 55 65 81;
    --color-base-200: 31 41 55;
    --color-base-100: 17 24 39;
    --color-base-50: 3 7 18;
  }

  html.neovim {
    color-scheme: 'neovim';
    --color-main: 34 197 94;
    --color-secondary: 6 182 212;
    --gradient-primary: theme('colors.cyan.500'), theme('colors.green.500');
  }

  html.gruvbox {
    color-scheme: 'gruvbox';
    --color-main: 249 115 22;
    --color-secondary: 238 68 68;
    --gradient-primary: theme('colors.red.500'), theme('colors.orange.500');
  }

  html.tokyonight {
    color-scheme: 'tokyonight';
    --color-main: 59 130 246;
    --color-secondary: 168 85 247;
    --gradient-primary: theme('colors.purple.500'), theme('colors.blue.500');
  }

  html.rose-pine {
    color-scheme: 'rose-pine';
    --color-main: 217 119 6;
    --color-secondary: 219 39 119;
    --gradient-primary: theme('colors.pink.600'), theme('colors.amber.600');
  }
}
