/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* 
 * Tailwind Custom Theme
 * Additional styles to enhance the default Tailwind utilities
 */

/* Custom transitions */
.transition-hover {
  transition: all 0.2s ease;
}

/* Custom form styling enhancements */
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(79, 70, 229, 0.2) !important;
  outline-offset: 2px !important;
}

/* Card shadow utilities */
.card-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-shadow-hover:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Subtle background gradients */
.bg-gradient-subtle {
  background-image: linear-gradient(to right, #f5f5f5, #fafafa);
}

/* Custom border styles */
.border-subtle {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Custom color theme for the new design */
:root {
  --color-terminal-green: rgb(0, 214, 160);
  --color-jet-black: rgb(18, 18, 18);
  --color-dark-gray: rgb(41, 41, 41);
  --color-medium-gray: rgb(58, 58, 58);
  --color-soft-gray: rgb(242, 242, 242);
  --color-darker-gray: rgb(30, 30, 30);
}

/* Dark mode utilities */
.dark {
  --foreground-rgb: 242, 242, 242;
  --background-start-rgb: 18, 18, 18;
  --background-end-rgb: 18, 18, 18;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

:is(.dark *)::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

:is(.dark *)::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 58 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

:is(.dark *)::-webkit-scrollbar-thumb:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(90 90 90 / var(--tw-bg-opacity, 1));
}

/* Font overrides */
body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

code, kbd, samp, pre {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}