/* Custom color classes for NOFC dark theme */
:root {
  --color-primary: #C08B5C;
  --color-primary-light: #D99B66;
  --color-primary-dark: #8B512F;
  --color-background: #1F1F1F;
  --color-background-secondary: #2E2E2E;
  --color-text: #D4B08C;
  --color-text-highlight: #D99B66;
}

/* Background colors */
.bg-background {
  background-color: var(--color-background);
}

.bg-background-secondary {
  background-color: var(--color-background-secondary);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
}

.bg-primary-dark {
  background-color: var(--color-primary-dark);
}

/* Text colors */
.text-text {
  color: var(--color-text);
}

.text-text-highlight {
  color: var(--color-text-highlight);
}

.text-background {
  color: var(--color-background);
}

.text-primary {
  color: var(--color-primary);
}

/* Border colors */
.border-primary {
  border-color: var(--color-primary);
}

.border-background {
  border-color: var(--color-background);
}

/* Opacity variants */
.bg-background\/80 {
  background-color: rgba(31, 31, 31, 0.8);
}

.bg-background\/90 {
  background-color: rgba(31, 31, 31, 0.9);
}

.bg-background\/95 {
  background-color: rgba(31, 31, 31, 0.95);
}

.border-primary\/20 {
  border-color: rgba(192, 139, 92, 0.2);
}

.text-text\/70 {
  color: rgba(212, 176, 140, 0.7);
}

/* Hover states */
.hover\:bg-background:hover {
  background-color: var(--color-background);
}

.hover\:bg-primary:hover {
  background-color: var(--color-primary);
}

.hover\:bg-primary-light:hover {
  background-color: var(--color-primary-light);
}

.hover\:bg-primary-dark:hover {
  background-color: var(--color-primary-dark);
}

.hover\:text-primary:hover {
  color: var(--color-primary);
}

.hover\:text-text-highlight:hover {
  color: var(--color-text-highlight);
}

.hover\:text-background:hover {
  color: var(--color-background);
}

/* Focus states */
.focus\:ring-primary:focus {
  --tw-ring-color: var(--color-primary);
}

.focus\:border-primary:focus {
  border-color: var(--color-primary);
}

/* Ensure proper contrast */
body {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Fix input fields for dark theme */
input, select, textarea {
  background-color: var(--color-background);
  color: var(--color-text);
  border-color: rgba(192, 139, 92, 0.2);
}

input:focus, select:focus, textarea:focus {
  background-color: var(--color-background);
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 139, 92, 0.1);
}

/* Fix placeholder text */
input::placeholder, textarea::placeholder {
  color: rgba(212, 176, 140, 0.5);
}

/* Navigation adjustments */
nav {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Card shadows for dark theme */
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Gradient backgrounds */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-primary {
  --tw-gradient-from: var(--color-primary);
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-dark {
  --tw-gradient-to: var(--color-primary-dark);
}

/* Transform utilities */
.transform {
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
}

/* Transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-200 {
  transition-duration: 200ms;
}

/* Rounded corners */
.rounded-full {
  border-radius: 9999px;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

/* Shadows */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Transforms */
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Opacity */
.opacity-90 {
  opacity: 0.9;
}

/* Backdrop blur */
.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Z-index utilities */
.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

/* Position utilities */
.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Width and Height utilities */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.w-48 {
  width: 12rem;
}

.h-48 {
  height: 12rem;
}

.w-64 {
  width: 16rem;
}

.h-64 {
  height: 16rem;
}

.w-80 {
  width: 20rem;
}

.h-80 {
  height: 20rem;
}

.w-96 {
  width: 24rem;
}

.h-96 {
  height: 24rem;
}

.w-32 {
  width: 8rem;
}

.h-32 {
  height: 8rem;
}

.w-40 {
  width: 10rem;
}

.h-40 {
  height: 10rem;
}

.w-56 {
  width: 14rem;
}

.h-56 {
  height: 14rem;
}

/* Padding utilities */
.pt-16 {
  padding-top: 4rem;
}

/* Display utilities */
.flex {
  display: flex;
}

.hidden {
  display: none;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.max-w-7xl {
  max-width: 80rem;
}

.object-contain {
  object-fit: contain;
}

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:w-64 {
    width: 16rem;
  }
  
  .sm\:h-64 {
    height: 16rem;
  }
  
  .sm\:w-40 {
    width: 10rem;
  }
  
  .sm\:h-40 {
    height: 10rem;
  }
}

@media (min-width: 768px) {
  .md\:hidden {
    display: none;
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:w-80 {
    width: 20rem;
  }
  
  .md\:h-80 {
    height: 20rem;
  }
  
  .md\:w-48 {
    width: 12rem;
  }
  
  .md\:h-48 {
    height: 12rem;
  }
}

@media (min-width: 1024px) {
  .lg\:w-96 {
    width: 24rem;
  }
  
  .lg\:h-96 {
    height: 24rem;
  }
  
  .lg\:w-56 {
    width: 14rem;
  }
  
  .lg\:h-56 {
    height: 14rem;
  }
}