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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --controls: 0 0% 100%;
    --controls-hover: 0 0% 90%;
    --controls-border: 0 0% 80%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 12.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;

    --color-modal: 244 244 244;
    --color-accent1: 123 97 255;
    --color-accent1-hover: 175 159 255;
    --color-accent2: 46 131 255;
    --color-accent3: 255 169 39;
    --color-accent4: 240 95 168;
    --color-accent5: #8c9599;
    --color-accent6: #1db100;

    --success: 143, 85%, 96%;
    --success-foreground: 145, 92%, 91%;
    --success-text: 140, 100%, 27%;

    --info: 208, 100%, 97%;
    --info-foreground: 221, 91%, 91%;
    --info-text: 210, 92%, 45%;

    --error: 359, 100%, 97%;
    --error-foreground: 359, 100%, 94%;
    --error-text: 360, 100%, 45%;

    --warning: 49, 100%, 97%;
    --warning-foreground: 49, 91%, 91%;
    --warning-text: 31, 92%, 45%;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 210 40% 98%;

    --controls: 217.2 32.6% 17.5%;
    --controls-hover: 0 0% 20%;
    --controls-border: 0 0% 40%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --card: 0 0% 0%;
    --card-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --ring: 217.2 32.6% 17.5%;

    --color-modal: 25 25 25;
    --color-accent1: 153 245 255;
    --color-accent1-hover: 212 251 255;
    --color-accent2: 123 97 255;
    --color-accent3: 255 201 63;
    --color-accent4: 240 95 168;
    --color-accent5: #8c9599;
    --color-accent6: #88fa4e;

    --success: 150, 100%, 6%;
    --success-foreground: 147, 100%, 12%;
    --success-text: 150, 86%, 65%;

    --info: 215, 100%, 6%;
    --info-foreground: 223, 100%, 12%;
    --info-text: 216, 87%, 65%;

    --error: 358, 76%, 10%;
    --error-foreground: 357, 89%, 16%;
    --error-text: 358, 100%, 81%;

    --warning: 64, 100%, 6%;
    --warning-foreground: 60, 100%, 12%;
    --warning-text: 46, 87%, 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-accent;
    @apply text-primary;
  }
  main {
    @apply text-primary;
  }
}
