@import "tailwindcss";

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

@theme inline {
  --color-primary-1: oklch(var(--primary-1));
  --color-primary-2: oklch(var(--primary-2));
  --color-secondary: oklch(var(--secondary));
  --color-accent: oklch(var(--accent));
  --color-background: oklch(var(--background));
  --color-background-lighter: color-mix(
    in oklch,
    oklch(var(--background)),
    oklch(var(--white)) 5%
  );
  --color-background-darker: color-mix(
    in oklch,
    oklch(var(--background)),
    oklch(var(--black)) 10%
  );
  --color-foreground: color-mix(
    in oklch,
    oklch(var(--foreground)),
    oklch(var(--background)) 5%
  );
  --color-foreground-focus: oklch(var(--foreground));
  --color-foreground-subtle: color-mix(
    in oklch,
    oklch(var(--foreground)),
    oklch(var(--background)) 10%
  );
  --color-background-hover: color-mix(
    in oklch,
    oklch(var(--background)),
    oklch(var(--primary-2)) 10%
  );
  --color-background-active: color-mix(
    in oklch,
    oklch(var(--background)),
    oklch(var(--primary-2)) 20%
  );
  --color-link: oklch(var(--primary-2));
  --color-link-hover: color-mix(
    in oklch,
    oklch(var(--primary-2)),
    oklch(var(--white)) 10%
  );
  --color-link-active: color-mix(
    in oklch,
    oklch(var(--primary-2)),
    oklch(var(--white)) 20%
  );

  /* Tailwind config.js colors converted to v4 format */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  /* Map to your existing color system */
  --color-primary: var(--color-primary-500);
  --primary: var(--color-primary-500);

  --color-secondary-50: #fefce8;
  --color-secondary-100: #fef9c3;
  --color-secondary-200: #fef08a;
  --color-secondary-300: #fde047;
  --color-secondary-400: #facc15;
  --color-secondary-500: #eab308;
  --color-secondary-600: #ca8a04;
  --color-secondary-700: #a16207;
  --color-secondary-800: #854d0e;
  --color-secondary-900: #713f12;

  /* Map to your existing color system */
  --secondary: var(--color-secondary-500);

  /* Font families */
  --font-readable:
    system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu,
    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display:
    "Garet", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-serif: "Georgia", serif;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* Animations and keyframes */
  --animate-fade-in: fadeIn 0.5s ease-in-out;
  --animate-slide-up: slideUp 0.3s ease-out;
  --animate-pulse-slow: pulse 3s infinite;
}

:root {
  --jungle: 66.04% 0.1278 171.83; /* rgb(56, 108, 91) */
  --castleton: 43.71% 0.0897 166.89; /* rgb(43, 77, 63) */
  --darkcyan: 44.6% 0.0761 194.77; /* rgb(45, 76, 89) */
  --charcoal: 0.345 0.027 253.106; /* rgb(88, 88, 88) */
  --isabeline: 96.08% 0.0054 95.1; /* rgb(245, 245, 245) */
  --white: 100% 0 100; /* rgb(255, 255, 255) */
  --black: 0% 0.0054 95.1; /* rgb(0, 0, 0) */
  /* dark mode colors*/
  --aquamarine: 0.5 0.5 180;
  --mint: 0.5 0.5 120;
  --verdigris: 0.5 0.5 150;

  font-family:
    "Garet",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  align-items: center;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: var(--secondary) !important;
}

/* Colors for different styles */
:root {
  --primary-1: var(--castleton);
  --primary-2: var(--jungle);
  --secondary: var(--darkcyan);
  --accent: var(--charcoal);
  --background: var(--white);
  --foreground: var(--charcoal);

  /* Gray shade equivalents using accent with transparency */
  --gray-50: color-mix(
    in oklch,
    oklch(var(--accent)) 5%,
    oklch(var(--background))
  );
  --gray-100: color-mix(
    in oklch,
    oklch(var(--accent)) 10%,
    oklch(var(--background))
  );
  --gray-200: color-mix(
    in oklch,
    oklch(var(--accent)) 20%,
    oklch(var(--background))
  );
  --gray-300: color-mix(
    in oklch,
    oklch(var(--accent)) 30%,
    oklch(var(--background))
  );
  --gray-400: color-mix(
    in oklch,
    oklch(var(--accent)) 40%,
    oklch(var(--background))
  );
  --gray-500: color-mix(
    in oklch,
    oklch(var(--accent)) 50%,
    oklch(var(--background))
  );
  --gray-600: color-mix(
    in oklch,
    oklch(var(--accent)) 60%,
    oklch(var(--background))
  );
  --gray-700: color-mix(
    in oklch,
    oklch(var(--accent)) 70%,
    oklch(var(--background))
  );
  --gray-800: color-mix(
    in oklch,
    oklch(var(--accent)) 80%,
    oklch(var(--background))
  );
  --gray-900: color-mix(
    in oklch,
    oklch(var(--accent)) 90%,
    oklch(var(--background))
  );
}

.dark {
  --primary-1: var(--mint);
  --primary-2: var(--aquamarine);
  --secondary: var(--verdigris);
  --accent: var(--isabeline);
  --background: var(--charcoal);
  --foreground: var(--accent);

  /* Gray shade equivalents for dark mode */
  --gray-50: color-mix(
    in oklch,
    oklch(var(--accent)) 5%,
    oklch(var(--background))
  );
  --gray-100: color-mix(
    in oklch,
    oklch(var(--accent)) 10%,
    oklch(var(--foreground))
  );
  --gray-200: color-mix(
    in oklch,
    oklch(var(--accent)) 20%,
    oklch(var(--foreground))
  );
  --gray-300: color-mix(
    in oklch,
    oklch(var(--accent)) 30%,
    oklch(var(--foreground))
  );
  --gray-400: color-mix(
    in oklch,
    oklch(var(--accent)) 40%,
    oklch(var(--foreground))
  );
  --gray-500: color-mix(
    in oklch,
    oklch(var(--accent)) 50%,
    oklch(var(--foreground))
  );
  --gray-500: color-mix(
    in oklch,
    oklch(var(--accent)) 50%,
    oklch(var(--foreground))
  );
  --gray-600: color-mix(
    in oklch,
    oklch(var(--accent)) 60%,
    oklch(var(--foreground))
  );
  --gray-700: color-mix(
    in oklch,
    oklch(var(--accent)) 70%,
    oklch(var(--foreground))
  );
  --gray-800: color-mix(
    in oklch,
    oklch(var(--accent)) 80%,
    oklch(var(--foreground))
  );
  --gray-900: color-mix(
    in oklch,
    oklch(var(--accent)) 90%,
    oklch(var(--background))
  );
}

/* Custom tailwind utilities */
@layer utilities {
  .transition-scale-in {
    animation: scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes scale-in {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Keyframes from tailwind config */
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideUp {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }

  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
  .animate-pulse-slow {
    animation: pulse 3s infinite;
  }

  /* Spacing utilities */
  .space-18 {
    margin: 4.5rem;
  }
  .space-88 {
    margin: 22rem;
  }
  .p-18 {
    padding: 4.5rem;
  }
  .p-88 {
    padding: 22rem;
  }
  .m-18 {
    margin: 4.5rem;
  }
  .m-88 {
    margin: 22rem;
  }

  /* Font family utilities */
  .font-sans {
    font-family: "Inter", system-ui, sans-serif;
  }
  .font-serif {
    font-family: "Georgia", serif;
  }

  /* Primary color utilities with higher specificity */
  .bg-primary {
    background-color: var(--color-primary-500) !important;
  }
  .bg-primary-50 {
    background-color: var(--color-primary-50) !important;
  }
  .bg-primary-100 {
    background-color: var(--color-primary-100) !important;
  }
  .bg-primary-200 {
    background-color: var(--color-primary-200) !important;
  }
  .bg-primary-300 {
    background-color: var(--color-primary-300) !important;
  }
  .bg-primary-400 {
    background-color: var(--color-primary-400) !important;
  }
  .bg-primary-500 {
    background-color: var(--color-primary-500) !important;
  }
  .bg-primary-600 {
    background-color: var(--color-primary-600) !important;
  }
  .bg-primary-700 {
    background-color: var(--color-primary-700) !important;
  }
  .bg-primary-800 {
    background-color: var(--color-primary-800) !important;
  }
  .bg-primary-900 {
    background-color: var(--color-primary-900) !important;
  }

  /* Text color utilities */
  .text-primary {
    color: var(--color-primary-500) !important;
  }
  .text-primary-50 {
    color: var(--color-primary-50) !important;
  }
  .text-primary-100 {
    color: var(--color-primary-100) !important;
  }
  .text-primary-200 {
    color: var(--color-primary-200) !important;
  }
  .text-primary-300 {
    color: var(--color-primary-300) !important;
  }
  .text-primary-400 {
    color: var(--color-primary-400) !important;
  }
  .text-primary-500 {
    color: var(--color-primary-500) !important;
  }
  .text-primary-600 {
    color: var(--color-primary-600) !important;
  }
  .text-primary-700 {
    color: var(--color-primary-700) !important;
  }
  .text-primary-800 {
    color: var(--color-primary-800) !important;
  }
  .text-primary-900 {
    color: var(--color-primary-900) !important;
  }

  /* Secondary color utilities */
  .bg-secondary {
    background-color: var(--color-secondary-500) !important;
  }
  .bg-secondary-50 {
    background-color: var(--color-secondary-50) !important;
  }
  .bg-secondary-100 {
    background-color: var(--color-secondary-100) !important;
  }
  .bg-secondary-200 {
    background-color: var(--color-secondary-200) !important;
  }
  .bg-secondary-300 {
    background-color: var(--color-secondary-300) !important;
  }
  .bg-secondary-400 {
    background-color: var(--color-secondary-400) !important;
  }
  .bg-secondary-500 {
    background-color: var(--color-secondary-500) !important;
  }
  .bg-secondary-600 {
    background-color: var(--color-secondary-600) !important;
  }
  .bg-secondary-700 {
    background-color: var(--color-secondary-700) !important;
  }
  .bg-secondary-800 {
    background-color: var(--color-secondary-800) !important;
  }
  .bg-secondary-900 {
    background-color: var(--color-secondary-900) !important;
  }

  /* Button component with proper colors */
  .btn-primary {
    background-color: var(--color-primary-500) !important;
    color: white !important;
    border: none !important;
  }
  .btn-primary:hover {
    background-color: var(--color-primary-600) !important;
  }
  .btn-primary:active {
    background-color: var(--color-primary-700) !important;
  }

  .btn-secondary {
    background-color: var(--color-secondary-500) !important;
    color: black !important;
    border: none !important;
  }
  .btn-secondary:hover {
    background-color: var(--color-secondary-600) !important;
  }

  /* Utility classes for accent-based grays */
  .bg-accent-50 {
    background-color: oklch(var(--gray-50));
  }
  .bg-accent-100 {
    background-color: oklch(var(--gray-100));
  }
  .bg-accent-200 {
    background-color: oklch(var(--gray-200));
  }
  .bg-accent-300 {
    background-color: oklch(var(--gray-300));
  }
  .bg-accent-400 {
    background-color: oklch(var(--gray-400));
  }
  .bg-accent-500 {
    background-color: oklch(var(--gray-500));
  }
  .bg-accent-600 {
    background-color: oklch(var(--gray-600));
  }
  .bg-accent-700 {
    background-color: oklch(var(--gray-700));
  }
  .bg-accent-800 {
    background-color: oklch(var(--gray-800));
  }
  .bg-accent-900 {
    background-color: oklch(var(--gray-900));
  }

  .text-accent-50 {
    color: oklch(var(--gray-50));
  }
  .text-accent-100 {
    color: oklch(var(--gray-100));
  }
  .text-accent-200 {
    color: oklch(var(--gray-200));
  }
  .text-accent-300 {
    color: oklch(var(--gray-300));
  }
  .text-accent-400 {
    color: oklch(var(--gray-400));
  }
  .text-accent-500 {
    color: oklch(var(--gray-500));
  }
  .text-accent-600 {
    color: oklch(var(--gray-600));
  }
  .text-accent-700 {
    color: oklch(var(--gray-700));
  }
  .text-accent-800 {
    color: oklch(var(--gray-800));
  }
  .text-accent-900 {
    color: oklch(var(--gray-900));
  }
  .text-base {
    color: oklch(var(--foreground));
  }

  .border-accent-50 {
    border-color: oklch(var(--gray-50));
  }
  .border-accent-100 {
    border-color: oklch(var(--gray-100));
  }
  .border-accent-200 {
    border-color: oklch(var(--gray-200));
  }
  .border-accent-300 {
    border-color: oklch(var(--gray-300));
  }
  .border-accent-400 {
    border-color: oklch(var(--gray-400));
  }
  .border-accent-500 {
    border-color: oklch(var(--gray-500));
  }
  .border-accent-600 {
    border-color: oklch(var(--gray-600));
  }
  .border-accent-700 {
    border-color: oklch(var(--gray-700));
  }
  .border-accent-800 {
    border-color: oklch(var(--gray-800));
  }
  .border-accent-900 {
    border-color: oklch(var(--gray-900));
  }
  .border {
    border-color: oklch(var(--accent));
  }
}

/* Input classes */
.login-container {
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.input-group {
  position: relative;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  transform: translateY(-20px) scale(0.8);
}

.input-group label {
  position: absolute;
  top: 12px;
  left: 12px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.error-message {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.loading {
  display: none;
}

.loading.active {
  display: inline-block;
}

.bg-mainpage-hero {
  background-image: url("../images/bg-hero.webp");
}