/* BumeRange Brand Styles */
/* Font imports - using Google Fonts CDN for now (can switch to self-hosted later) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&family=Inter:wght@400;500&family=Caveat:wght@600&display=swap');

/* CSS Variables - BumeRange Brand Palette */
:root {
  /* Primary Colors */
  --bume: #145da0;
  --range: #2e8bc0;
  --baby: #b1d4e0;
  --dark: #0c2d48;
  --accent: #ff7043;

  /* Neutral Palette (keep from design system) */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;

  /* Typography */
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-slogan: 'Caveat', cursive, system-ui;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3 {
  font-family: var(--font-heading);
  font-weight: 600;
}

body, p, span, div, button, input, textarea, select {
  font-family: var(--font-body);
}

/* Brand-specific components */
.brand-slogan {
  font-family: var(--font-slogan);
  font-weight: 600;
}

/* Animated typing effect for slogan */
.typing-slogan {
  font-family: var(--font-slogan);
  font-size: 1.5rem;
  color: var(--dark);
  overflow: hidden;
  border-right: 3px solid var(--range);
  white-space: nowrap;
  margin: 0 auto;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--range); }
}

/* Update button colors */
.btn-primary,
.bg-blue-500 {
  background-color: var(--bume) !important;
  border-color: var(--bume) !important;
}

.btn-primary:hover,
.bg-blue-500:hover,
.hover\:bg-blue-600:hover {
  background-color: var(--range) !important;
  border-color: var(--range) !important;
}

.bg-blue-600 {
  background-color: var(--range) !important;
}

.bg-blue-100 {
  background-color: var(--baby) !important;
}

.text-blue-500 {
  color: var(--bume) !important;
}

.text-blue-600 {
  color: var(--range) !important;
}

.text-blue-800 {
  color: var(--dark) !important;
}

.border-blue-300,
.border-blue-500 {
  border-color: var(--range) !important;
}

/* Accent CTA buttons */
.btn-accent {
  background-color: var(--accent);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 150ms ease;
}

.btn-accent:hover {
  background-color: #ff5722;
  transform: translateY(-1px);
}

/* Gradient utilities */
.bg-gradient-bumerange {
  background: linear-gradient(135deg, var(--bume) 0%, var(--range) 100%);
}

.text-gradient-bumerange {
  background: linear-gradient(90deg, var(--bume) 50%, var(--range) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Logo styling */
.logo-mark {
  width: 40px;
  height: 40px;
  display: inline-block;
}

.logo-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
}

.logo-wordmark-bume {
  color: var(--bume);
}

.logo-wordmark-range {
  color: var(--range);
}

/* Status colors updated */
.status-active,
.status-ready {
  background-color: rgba(46, 139, 192, 0.1);
  color: var(--range);
  border-color: var(--range);
}

.status-warning {
  background-color: rgba(255, 112, 67, 0.1);
  color: var(--accent);
  border-color: var(--accent);
}

/* Card hover effects */
.card-hover {
  transition: all 150ms ease;
}

.card-hover:hover {
  border-color: var(--range);
  box-shadow: 0 4px 12px rgba(46, 139, 192, 0.15);
}

/* Focus states with brand colors */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--range) !important;
  box-shadow: 0 0 0 3px rgba(46, 139, 192, 0.1) !important;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 139, 192, 0.3) !important;
}