:root {
  /* --- Brand Palette (Premium Tech) --- */
  /* Primary: More vibrant, deeper blue for trust & tech feel */
  --brand-primary: #2563EB;
  /* Bright Royal Blue */
  --brand-primary-dark: #1D4ED8;
  /* Deep Blue for hover */
  --brand-primary-light: #60A5FA;
  /* Light Blue for accents */

  /* Gradients */
  --brand-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --brand-gradient-hover: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);

  /* Text */
  --brand-text: #0F172A;
  /* Slate 900 - Deep, rich dark */
  --brand-text-muted: #64748B;
  /* Slate 500 */

  /* UI Elements */
  --brand-surface: #FFFFFF;
  --brand-surface-muted: #F8FAFC;
  /* Very light cool gray */
  --brand-border: #E2E8F0;
  /* Slate 200 */
  --brand-ring: rgba(37, 99, 235, 0.4);
  /* Focus ring */

  /* --- Shadows (Blue-tinted for 'Glow' effect) --- */
  --shadow-sm: 0 1px 2px 0 rgba(37, 99, 235, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -2px rgba(37, 99, 235, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(37, 99, 235, 0.1), 0 10px 10px -5px rgba(37, 99, 235, 0.04);

  /* --- Radius --- */
  --radius-sm: 0.5rem;
  /* 8px */
  --radius-md: 0.75rem;
  /* 12px */
  --radius-lg: 1rem;
  /* 16px */
  --radius-xl: 1.5rem;
  /* 24px */
}

/* --- Base & Typography --- */
body {
  color: var(--brand-text);
  background-color: var(--brand-surface-muted);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.025em;
  /* Tighter for modern look */
  color: var(--brand-text);
}

/* --- Components --- */

/* Buttons */
.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-image: var(--brand-gradient);
  color: white;
  box-shadow: var(--shadow-md);
  border: 1px solid transparent;
}

.btn:hover,
.btn-primary:hover {
  background-image: var(--brand-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.25), 0 4px 6px -2px rgba(37, 99, 235, 0.1);
}

.btn:active {
  transform: translateY(0);
}

/* Outline Button */
.btn-outline {
  background: white;
  color: var(--brand-primary);
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  border-color: var(--brand-primary);
  background-color: #F0F9FF;
  color: var(--brand-primary-dark);
}

/* Cards */
.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

/* Card Hover Effect */
.card-hover:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  /* Subtle blue border on hover */
  z-index: 10;
}

/* Inputs */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* --- Utilities --- */

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Badges */
.badge-brand {
  background-color: var(--brand-primary);
  color: white;
}

/* Tailwind Overrides */
.bg-indigo-600 {
  background-color: var(--brand-primary) !important;
}

.hover\:bg-indigo-500:hover {
  background-color: var(--brand-primary-dark) !important;
}

.text-indigo-600 {
  color: var(--brand-primary) !important;
}

.border-indigo-200 {
  border-color: #BFDBFE !important;
}

.bg-indigo-50 {
  background-color: #EFF6FF !important;
}

/* Custom Scrollbar for Rails */
.snap-x::-webkit-scrollbar {
  height: 0px;
  /* Hide scrollbar for cleaner look */
  background: transparent;
}