/* Custom styles for HTMX and app-specific behavior */

/* Brand variables */
:root {
  --primary: #0B64FE;
  --primary-700: #0A58E8;
  --primary-50: #E9F1FF;
  --bg: #F7F7F7;
  --text: #2F2E41;
}

/* Global typography and colors */
body {
  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', Arial, sans-serif;
  font-weight: 700;
  color: var(--text);
}

/* Utility helpers */
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary) !important; }
.hover\:bg-primary-700:hover { background: var(--primary-700) !important; }
.bg-app { background: var(--bg) !important; }
.text-app { color: var(--text) !important; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-radius: 0.5rem;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover { background: var(--primary-700); }
.btn-primary:active { transform: translateY(1px); }

/* Map legacy custom classes to new brand color */
.bg-yale_blue, .bg-yale_blue-600 { background: var(--primary) !important; }
.hover\:bg-yale_blue-700:hover { background: var(--primary-700) !important; }
.text-yale_blue, .text-yale_blue-600 { color: var(--primary) !important; }
.border-yale_blue-200 { border-color: #cfe0ff !important; }

/* HTMX loading states */
.htmx-request {
  opacity: 0.5;
  pointer-events: none;
}

.htmx-request .loading {
  display: inline-block;
}

/* Loading spinner */
.loading {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Custom timeline border */
.timeline-border {
  border-left: 4px solid #2563eb;
}

/* Status colors that extend Tailwind */
.status-success {
  @apply bg-green-100 text-green-800;
}

.status-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.status-error {
  @apply bg-red-100 text-red-800;
}