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

@layer base {
  :root {
    --background: 214 27.37% 7.55%;
    --foreground: 212 16% 82%;
    --muted: 214 12% 16%;
    --muted-foreground: 214 12% 66%;
    --popover: 214 27% 9%;
    --popover-foreground: 212 16% 92%;
    --card: 214 23.58% 9.03%;
    --card-foreground: 212 16% 87%;
    --border: 214 17% 17%;
    --input: 214 17% 20%;
    --primary: 194.72 85% 45%;
    --primary-foreground: 189 85% 5%;
    --secondary: 221.89 18.13% 22.46%;
    --secondary-foreground: 189 30% 85%;
    --accent: 221.89 18.13% 22.46%;
    --accent-foreground: 214 27% 87%;
    --destructive: 6 96% 59%;
    --destructive-foreground: 0 0% 100%;
    --ring: 215.09 100% 98.03%;
    --radius: 0.4rem;
  }

  .bluelight {
    --background: 230 8% 85%;
    --foreground: 229 26% 28%;
    --muted: 230 12% 81%;
    --muted-foreground: 230 12% 21%;
    --popover: 230 8% 82%;
    --popover-foreground: 229 26% 18%;
    --card: 230 8% 83%;
    --card-foreground: 229 26% 23%;
    --border: 0 0% 80%;
    --input: 0 0% 77%;
    --primary: 223 42% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 223 30% 75%;
    --secondary-foreground: 223 30% 15%;
    --accent: 230 8% 70%;
    --accent-foreground: 230 8% 10%;
    --destructive: 2 82% 30%;
    --destructive-foreground: 2 82% 90%;
    --ring: 223 42% 57%;
  }

  .cyberpunk {
    --background: 253 41% 19%;
    --foreground: 157 100% 50%;
    --muted: 253 12% 23%;
    --muted-foreground: 253 12% 73%;
    --popover: 253 41% 16%;
    --popover-foreground: 157 100% 60%;
    --card: 253 41% 17%;
    --card-foreground: 157 100% 55%;
    --border: 253 31% 24%;
    --input: 253 31% 27%;
    --primary: 167 100% 50%;
    --primary-foreground: 167 100% 10%;
    --secondary: 167 30% 25%;
    --secondary-foreground: 167 30% 85%;
    --accent: 253 41% 34%;
    --accent-foreground: 254 41% 94%;
    --destructive: 5 92% 45%;
    --destructive-foreground: 0 0% 100%;
    --ring: 167 100% 50%;
  }

  .midnight {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --muted: 0 0% 0%;
    --muted-foreground: 0 0% 50%;
    --popover: 0 0% 0%;
    --popover-foreground: 0 0% 95%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 90%;
    --border: 0 0% 25%;
    --input: 0 0% 20%;
    --primary: 158 97% 53%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 8%;
    --secondary-foreground: 167 0% 85%;
    --accent: 0 0% 12%;
    --accent-foreground: 0 0% 90%;
    --destructive: 360 100% 65%;
    --destructive-foreground: 0 0% 100%;
    --ring: 0 0% 70%;
    --radius: 0.4rem;
  }
  .ctp-mocha {
    --background: 240 21% 15%; /*base*/
    --foreground: 226 64% 88%; /*text*/
    --muted: 240 21% 12%; /*mantle*/
    --muted-foreground: 228 17% 64%; /*overlay 2*/
    --popover: 240 21% 12%; /*mantle*/
    --popover-foreground: 227 35% 80%; /*subtext 1*/
    --card: 240 21% 12%; /*mantle*/
    --card-foreground: 228 24% 72%; /*subtext 0*/
    --border: 234 13% 31%; /*surface 1*/
    --input: 234 13% 31%; /*surface 1*/
    --primary: 115 54% 76%; /*green*/
    --primary-foreground: 240 21% 15%; /*base*/
    --secondary: 240 21% 12%; /*mantle*/
    --secondary-foreground: 228 24% 72%; /*subtext 0*/
    --accent: 237 16% 23%; /*surface 0*/
    --accent-foreground: 227 35% 80%; /*subtext 1*/
    --destructive: 343 81% 75%; /*red*/
    --destructive-foreground: 226 64% 88%;/*text*/
    --ring: 228 24% 72%; /*subtext 0*/
  }
  .ctp-latte {
    --background: 220 23% 95%; /* base */
    --foreground: 234 16% 35%;/* text */
    --muted: 220 22% 92%; /* mantle */
    --muted-foreground: 232 10% 53%; /* overlay2 */
    --popover: 220 22% 92%; /* mantle */
    --popover-foreground: 233 13% 41%; /* subtext1 */
    --card: 220 22% 92%; /* mantle */
    --card-foreground: 233 10% 47%; /* subtext0 */
    --border: 225 14% 77%; /* surface1 */
    --input: 225 14% 77%; /* surface1 */
    --primary: 220 91% 54%; /* blue */
    --primary-foreground: 220 23% 95%; /* base */
    --secondary: 220 22% 92%; /* mantle */
    --secondary-foreground: 233 10% 47%; /* subtext0 */
    --accent: 223 16% 83%; /* surface0 */
    --accent-foreground: 233 13% 41%; /* subtext1 */
    --destructive: 347 87% 44%; /* red */
    --destructive-foreground: 234 16% 35%; /* text */
    --ring: 233 10% 47%; /* subtext0 */
}
 
.ctp-frappe {
  --background: 229 19% 23%; /* base */
  --foreground: 227 70% 87%; /* text */
  --muted: 231 19% 20%; /* mantle */
  --muted-foreground: 228 22% 66%; /* overlay2 */
  --popover: 231 19% 20%; /* mantle */
  --popover-foreground: 227 44% 80%; /* subtext1 */
  --card: 231 19% 20%; /* mantle */
  --card-foreground: 228 29% 73%; /* subtext0 */
  --border: 227 15% 37%; /* surface1 */
  --input: 227 15% 37%; /* surface1 */
  --primary: 222 74% 74%; /* blue */
  --primary-foreground: 229 19% 23%; /* base */
  --secondary: 231 19% 20%; /* mantle */
  --secondary-foreground: 228 29% 73%; /* subtext0 */
  --accent: 230 16% 30%; /* surface0 */
  --accent-foreground: 227 44% 80%; /* subtext1 */
  --destructive: 359 68% 71%; /* red */
  --destructive-foreground: 227 70% 87%; /* text */
  --ring: 228 29% 73%; /* subtext0 */
} 
  .ctp-macchiato {
    --background: 232 23% 18%; /* base */
    --foreground: 227 68% 88%; /* text */
    --muted: 233 23% 15%; /* mantle */
    --muted-foreground: 228 20% 65%; /* overlay2 */
    --popover: 233 23% 15%; /* mantle */
    --popover-foreground: 228 39% 80%; /* subtext1 */
    --card: 233 23% 15%; /* mantle */
    --card-foreground: 227 27% 72%; /* subtext0 */
    --border: 231 16% 34%; /* surface1 */
    --input: 231 16% 34%; /* surface1 */
    --primary: 220 83% 75%; /* blue */
    --primary-foreground: 232 23% 18%; /* base */
    --secondary: 233 23% 15%; /* mantle */
    --secondary-foreground: 227 27% 72%; /* subtext0 */
    --accent: 230 19% 26%; /* surface0 */
    --accent-foreground: 228 39% 80%; /* subtext1 */
    --destructive: 351 74% 73%; /* red */
    --destructive-foreground: 227 68% 88%; /* text */
    --ring: 227 27% 72%; /* subtext0 */
  }
  
  .rp-main {
    --background: 249 22% 12%;
    --foreground: 245 50% 91%;
    --muted: 249 12% 47%;
    --muted-foreground: 248 15% 61%;
    --popover: 247 23% 15%;
    --popover-foreground: 245 50% 91%;
    --card: 248 25% 18%;
    --card-foreground: 245 50% 91%;
    --border: 249 15% 28%;
    --input: 249 15% 28%;
    --primary: 267 57% 78%;
    --primary-foreground: 249 22% 12%;
    --secondary: 245 22% 20%;
    --secondary-foreground: 245 50% 91%;
    --accent: 249 15% 28%;
    --accent-foreground: 245 50% 91%;
    --destructive: 343 76% 68%;
    --destructive-foreground: 245 50% 91%;
    --ring: 248 15% 28%;
  }
  
  .rp-moon {
    --background: 246 24% 17%;
    --foreground: 245 50% 91%;
    --muted: 249 12% 47%;
    --muted-foreground: 248 15% 61%;
    --popover: 248 24% 20%;
    --popover-foreground: 245 50% 91%;
    --card: 248 21% 26%;
    --card-foreground: 245 50% 91%;
    --border: 247 16% 30%;
    --input: 247 16% 30%;
    --primary: 267 57% 78%;
    --primary-foreground: 246 24% 17%;
    --secondary: 248 21% 26%;
    --secondary-foreground: 245 50% 91%;
    --accent: 247 16% 30%;
    --accent-foreground: 245 50% 91%;
    --destructive: 343 76% 68%;
    --destructive-foreground: 245 50% 91%;
    --ring: 247 16% 30%;
  }
  
  .rp-dawn {
    --background: 32 57% 95%;
    --foreground: 248 19% 40%;
    --muted: 257 9% 61%;
    --muted-foreground: 248 12% 52%;
    --popover: 35 100% 98%;
    --popover-foreground: 248 19% 40%;
    --card: 33 43% 91%;
    --card-foreground: 248 19% 40%;
    --border: 10 9% 86%;
    --input: 10 9% 86%;
    --primary: 268 21% 57%;
    --primary-foreground: 32 57% 95%;
    --secondary: 33 43% 91%;
    --secondary-foreground: 248 19% 40%;
    --accent: 10 9% 86%;
    --accent-foreground: 248 19% 40%;
    --destructive: 343 35% 55%;
    --destructive-foreground: 248 19% 40%;
    --ring: 10 9% 86%;
  }

  
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer base {
  .loader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .loader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .loader div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .loader div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .loader div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}