@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* Theme Variables */
:root {
  --background: #ffffff;
  --foreground: #171717;

  /* Light theme colors */
  --color-bg-primary: 255 255 255;
  --color-bg-secondary: 249 250 251;
  --color-bg-tertiary: 243 244 246;

  --color-text-primary: 17 24 39;
  --color-text-secondary: 75 85 99;
  --color-text-tertiary: 156 163 175;

  --color-border: 229 231 235;
  --color-border-hover: 209 213 219;

  --color-primary: 99 102 241;
  --color-primary-hover: 79 70 229;

  /* Additional semantic tokens */
  --color-success: 34 197 94;
  --color-warning: 251 146 60;
  --color-error: 239 68 68;
  --color-info: 59 130 246;

  /* Shadow tokens */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.dark {
  /* --background: #0a0a0a; */
  --background: #101828;
  --foreground: #ededed;

  /* Dark theme colors */
  --color-bg-primary: 17 24 39;
  --color-bg-secondary: 31 41 55;
  --color-bg-tertiary: 55 65 81;

  --color-text-primary: 243 244 246;
  --color-text-secondary: 209 213 219;
  --color-text-tertiary: 156 163 175;

  --color-border: 55 65 81;
  --color-border-hover: 75 85 99;

  --color-primary: 129 140 248;
  --color-primary-hover: 99 102 241;

  /* Additional semantic tokens */
  --color-success: 74 222 128;
  --color-warning: 251 191 36;
  --color-error: 248 113 113;
  --color-info: 96 165 250;

  /* Shadow tokens */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
}

body {
  background: var(--background);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  color: var(--foreground);
}

/* Smooth transitions for theme changes */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom animations for login page */
@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px);
  }

  33% {
    transform: translateY(-20px) translateX(10px);
  }

  66% {
    transform: translateY(10px) translateX(-10px);
  }
}

@keyframes float-delayed {

  0%,
  100% {
    transform: translateY(0px) translateX(0px);
  }

  33% {
    transform: translateY(15px) translateX(-15px);
  }

  66% {
    transform: translateY(-10px) translateX(15px);
  }
}

@keyframes pulse-slow {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 10s ease infinite;
}

.animate-float {
  animation: float 8s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 10s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

@layer components {
  .btn-global {
    @apply w-full py-2.5 sm:py-3.5 text-sm sm:text-base bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-700 hover:to-teal-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transform hover:scale-[1.01] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
  }

  .input-global {
    @apply w-full border rounded-lg px-3 py-2.5 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-200 hover:border-gray-400 dark:hover:border-gray-500;
  }

  .checkbox-global {
    @apply w-4 h-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-cyan-600 focus:ring-cyan-500 accent-cyan-600 cursor-pointer;
  }
}