@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import './avatar/styles.scss';
@import './switch/styles.scss';
@import './button/styles.scss';
@import './scroll-area/styles.scss';
@import './form/styles.scss';
@import './input/styles.scss';
@import './progress/styles.scss';
@import './badge/styles.scss';
@import './tooltip/styles.scss';
@import './modal/styles.scss';
@import './command/styles.scss';
@import './textarea/styles.scss';
@import './select/styles.scss';
@import './slider/styles.scss';

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;

  --muted: 60 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  --danger: 346.8 77.2% 49.8%;
  --danger-foreground: 355.7 100% 97.3%;

  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 20 14.3% 4.1%;

  .primary-blue {
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;

    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
  }

  .primary-green {
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
  }

  .primary-purple {
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;

    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
  }
}

.dark {
  --background: 20 14.3% 4.1%;
  --foreground: 60 9.1% 97.8%;

  --muted: 12 6.5% 15.1%;
  --muted-foreground: 24 5.4% 63.9%;

  --danger: 346.8 77.2% 49.8%;
  --danger-foreground: 355.7 100% 97.3%;

  --border: 12 6.5% 15.1%;
  --input: 12 6.5% 15.1%;
  --ring: 35.5 91.7% 32.9%;

  .primary-blue {
    --primary: 221 83% 53%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
  }

  .primary-green {
    --primary: 142.1 70.6% 45.3%;
    --primary-foreground: 144.9 80.4% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
  }

  .primary-purple {
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
  }
}