/* =========================================
   DATAFACE BRAND COLOR PALETTE
   Bootstrap 5.3 Overrides
   ========================================= */

/*
   BRAND COLOR DEFINITIONS
   Change hex codes here to update entire site
*/
:root {
  /* Named Brand Colors */
  --text-dark: #000814;      /* Off-black for body text */
  --navy-deep: #001D3D;      /* Deep navy - Primary brand color */
  --navy-light: #003566;     /* Lighter blue - Secondary brand color */
  --gold: #FFC300;           /* Gold - Primary highlight/accent */
  --yellow: #FFD60A;         /* Yellow - Secondary highlight/accent */

  /* Gradient Colors (matches WebGL hero gradient) */
  --gradient-color-1: #003566;  /* Dark blue */
  --gradient-color-2: #0084D4;  /* Medium blue */
  --gradient-color-3: #5CB3FF;  /* Light blue */
  --gradient-color-4: #abd8ff;  /* Very light blue */

  /* Bootstrap Color System Overrides */
  --bs-primary: var(--navy-deep);
  --bs-primary-rgb: 0, 29, 61;

  --bs-secondary: var(--navy-light);
  --bs-secondary-rgb: 0, 53, 102;

  --bs-warning: var(--gold);
  --bs-warning-rgb: 255, 195, 0;

  --bs-info: var(--yellow);
  --bs-info-rgb: 255, 214, 10;

  /* Body text uses typography system grey (overridden in typography.css) */
  --bs-body-color: #525252;
  --bs-body-color-rgb: 82, 82, 82;

  /* Link Colors */
  --bs-link-color: var(--navy-deep);
  --bs-link-hover-color: var(--navy-light);

  /* Button Colors (will inherit from primary/secondary) */
  --bs-btn-primary-bg: var(--navy-deep);
  --bs-btn-primary-border-color: var(--navy-deep);
  --bs-btn-primary-hover-bg: var(--navy-light);
  --bs-btn-primary-hover-border-color: var(--navy-light);
}

/* =========================================
   BOOTSTRAP COMPONENT OVERRIDES
   ========================================= */

/* Buttons - Modern 2026 Style */
.btn {
  border-radius: 8px;
  padding: 0.625rem 1.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn-primary {
  background-color: var(--navy-deep);
  border-color: var(--navy-deep);
  color: white;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--navy-light);
  border-color: var(--navy-light);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 29, 61, 0.15);
}

.btn-secondary {
  background-color: var(--navy-light);
  border-color: var(--navy-light);
  color: white;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--navy-deep);
  border-color: var(--navy-deep);
  color: white;
}

.btn-outline-primary {
  border-color: var(--navy-deep);
  color: var(--navy-deep);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--navy-deep);
  border-color: var(--navy-deep);
  color: white;
  transform: translateY(-1px);
}

.btn-warning {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--text-dark);
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: var(--text-dark);
}

/* Links */
a {
  color: var(--navy-deep);
  text-decoration: none;
}

a:hover {
  color: var(--navy-light);
  text-decoration: underline;
}

/* Badges */
.badge.bg-primary {
  background-color: var(--navy-deep) !important;
}

.badge.bg-secondary {
  background-color: var(--navy-light) !important;
}

.badge.bg-warning {
  background-color: var(--gold) !important;
  color: var(--text-dark) !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(0, 29, 61, 0.1);
  border-color: var(--navy-deep);
  color: var(--navy-deep);
}

.alert-warning {
  background-color: rgba(255, 195, 0, 0.1);
  border-color: var(--gold);
  color: var(--text-dark);
}

/* Cards */
.card-header.bg-primary {
  background-color: var(--navy-deep) !important;
  color: white;
}

/* Navigation */
.navbar {
  background-color: white;
  border-bottom: none;
}

.nav-link {
  color: var(--navy-deep);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--navy-light);
}

.nav-link.active {
  color: var(--navy-light);
  border-bottom: 2px solid var(--gold);
}

/* Forms */
.form-control:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 0.25rem rgba(0, 53, 102, 0.25);
}

.form-check-input:checked {
  background-color: var(--navy-deep);
  border-color: var(--navy-deep);
}

/* Progress bars */
.progress-bar {
  background-color: var(--navy-deep);
}

/* =========================================
   CUSTOM UTILITY CLASSES
   ========================================= */

/* Gradient Background (matches hero gradient colors) */
.bg-gradient-brand {
  background: linear-gradient(135deg,
    var(--gradient-color-1) 0%,
    var(--gradient-color-2) 33%,
    var(--gradient-color-3) 66%,
    var(--gradient-color-4) 100%) !important;
  color: white;
}

/* Background Colors */
.bg-navy-deep {
  background-color: var(--navy-deep) !important;
  color: white;
}

.bg-navy-light {
  background-color: var(--navy-light) !important;
  color: white;
}

.bg-gold {
  background-color: var(--gold) !important;
  color: var(--text-dark);
}

.bg-yellow {
  background-color: var(--yellow) !important;
  color: var(--text-dark);
}

/* Text Colors */
.text-navy-deep {
  color: var(--navy-deep) !important;
}

.text-navy-light {
  color: var(--navy-light) !important;
}

.text-gold {
  color: var(--gold) !important;
}

.text-yellow {
  color: var(--yellow) !important;
}

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

/* Border Colors */
.border-navy-deep {
  border-color: var(--navy-deep) !important;
}

.border-navy-light {
  border-color: var(--navy-light) !important;
}

.border-gold {
  border-color: var(--gold) !important;
}

.border-yellow {
  border-color: var(--yellow) !important;
}

/* Hover Effects */
.hover-navy-deep:hover {
  background-color: var(--navy-deep) !important;
  color: white !important;
}

.hover-gold:hover {
  background-color: var(--gold) !important;
  color: var(--text-dark) !important;
}

/* =========================================
   TYPOGRAPHY ENHANCEMENTS
   ========================================= */

/* Emphasis with brand colors */
.text-emphasis {
  color: var(--navy-deep);
  font-weight: 600;
}

/* Text highlight with yellow background */
.text-highlight {
  background-color: var(--yellow);
  padding: 0.2em 0.5em;
  border-radius: 4px;
  display: inline-block;
}

/* =========================================
   QUICK REFERENCE
   ========================================= */

/*
   USAGE EXAMPLES:

   Buttons:
   <button class="btn btn-primary">Deep Navy Button</button>
   <button class="btn btn-secondary">Light Navy Button</button>
   <button class="btn btn-warning">Gold Button</button>

   Backgrounds:
   <div class="bg-navy-deep p-4">Deep navy background</div>
   <div class="bg-gold p-4">Gold background</div>
   <div class="bg-brand-gradient p-4">Navy gradient</div>

   Text:
   <p class="text-navy-deep">Deep navy text</p>
   <span class="text-highlight">Highlighted text</span>

   Borders:
   <div class="border border-gold">Gold border</div>

   Links automatically use brand colors (no class needed)
*/