/**
 * GetFix CSS Variables
 *
 * Brand colors, typography, and Bootstrap 5 overrides
 *
 * @package GFX_Theme
 * @since 1.0.0
 */

:root {
  /* ========================================
     BRAND COLORS - Simplified Blue Family
     ======================================== */

  /* Primary Blue Family (4 tones) */
  --gfx-primary-dark: #0F172A;
  --gfx-primary-dark-rgb: 15, 23, 42;

  --gfx-primary: #1890FF;
  --gfx-primary-rgb: 24, 144, 255;

  --gfx-primary-light: #60A5FA;
  --gfx-primary-light-rgb: 96, 165, 250;

  --gfx-primary-bg: #DBEAFE;
  --gfx-primary-bg-rgb: 219, 234, 254;

  /* Legacy alias for compatibility */
  --gfx-light: var(--gfx-primary-bg);
  --gfx-light-rgb: 219, 234, 254;
  --gfx-dark: var(--gfx-primary-dark);
  --gfx-dark-rgb: 15, 23, 42;

  /* Neutral Colors */
  --gfx-gray: #64748B;
  --gfx-gray-rgb: 100, 116, 139;

  --gfx-white: #FFFFFF;
  --gfx-white-rgb: 255, 255, 255;

  /* Accent Color - Warm Orange for urgency */
  --gfx-accent: #FF6B35;
  --gfx-accent-rgb: 255, 107, 53;

  /* Gold (for stars, highlights) */
  --gfx-gold: #FFB300;
  --gfx-gold-rgb: 255, 179, 0;

  /* Cyan Light (for eyebrows on dark backgrounds) */
  --gfx-cyan-light: #a5f3fc;

  /* ========================================
     HERO / CTA PALETTE
     ======================================== */

  /* Blue gradient for hero/footer */
  --gfx-blue-dark: #0a72c3;
  --gfx-blue-dark-rgb: 10, 114, 195;

  --gfx-blue-medium: #1565C0;
  --gfx-blue-medium-rgb: 21, 101, 192;

  --gfx-blue-deep: #0D47A1;
  --gfx-blue-deep-rgb: 13, 71, 161;

  /* Navy for dark accents */
  --gfx-navy: #032c4f;
  --gfx-navy-rgb: 3, 44, 79;

  /* Yellow accent for CTAs */
  --gfx-yellow: #ffd900;
  --gfx-yellow-rgb: 255, 217, 0;

  /* Gray for subtle text */
  --gfx-gray-medium: #878782;
  --gfx-gray-medium-rgb: 135, 135, 130;

  /* Lightest Gray (for section backgrounds with dot pattern) */
  --gfx-gray-lightest: #F8F8F8;

  /* Charcoal (for footer, dark sections) */
  --gfx-charcoal: #2C2C2C;
  --gfx-charcoal-rgb: 44, 44, 44;

  --gfx-charcoal-dark: #1E1E1E;
  --gfx-charcoal-dark-rgb: 30, 30, 30;

  --gfx-gray-dark: #374151;
  --gfx-gray-dark-rgb: 55, 65, 81;

  /* Status Colors */
  --gfx-success: #10B981;
  --gfx-success-rgb: 16, 185, 129;

  --gfx-warning: #F59E0B;
  --gfx-warning-rgb: 245, 158, 11;

  --gfx-error: #EF4444;
  --gfx-error-rgb: 239, 68, 68;

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

  /* Font Families */
  --gfx-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --gfx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --gfx-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

  /* Font Sizes */
  --gfx-text-xs: 0.75rem;
  --gfx-text-sm: 0.875rem;
  --gfx-text-base: 1rem;
  --gfx-text-lg: 1.125rem;
  --gfx-text-xl: 1.25rem;
  --gfx-text-2xl: 1.5rem;
  --gfx-text-3xl: 2rem;
  --gfx-text-4xl: 2.5rem;

  /* Font Weights */
  --gfx-font-normal: 400;
  --gfx-font-medium: 500;
  --gfx-font-semibold: 600;
  --gfx-font-bold: 700;

  /* Line Heights */
  --gfx-leading-none: 1;
  --gfx-leading-tight: 1.2;
  --gfx-leading-snug: 1.375;
  --gfx-leading-normal: 1.5;
  --gfx-leading-relaxed: 1.625;

  /* ========================================
     SPACING
     ======================================== */

  --gfx-space-1: 0.25rem;
  --gfx-space-2: 0.5rem;
  --gfx-space-3: 0.75rem;
  --gfx-space-4: 1rem;
  --gfx-space-5: 1.25rem;
  --gfx-space-6: 1.5rem;
  --gfx-space-8: 2rem;
  --gfx-space-10: 2.5rem;
  --gfx-space-12: 3rem;
  --gfx-space-16: 4rem;
  --gfx-space-20: 5rem;

  /* ========================================
     BORDERS & RADIUS
     ======================================== */

  --gfx-radius-sm: 0.25rem;
  --gfx-radius: 0.5rem;
  --gfx-radius-lg: 0.75rem;
  --gfx-radius-xl: 1rem;
  --gfx-radius-2xl: 1.5rem;
  --gfx-radius-full: 9999px;

  --gfx-border-width: 1px;
  --gfx-border-color: rgba(var(--gfx-gray-rgb), 0.2);

  /* ========================================
     SHADOWS
     ======================================== */

  --gfx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --gfx-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --gfx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --gfx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --gfx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --gfx-transition-fast: 150ms ease;
  --gfx-transition: 200ms ease;
  --gfx-transition-slow: 300ms ease;

  /* ========================================
     BOOTSTRAP 5 OVERRIDES
     ======================================== */

  /* Theme Colors */
  --bs-primary: var(--gfx-primary);
  --bs-primary-rgb: var(--gfx-primary-rgb);

  --bs-secondary: var(--gfx-primary-dark);
  --bs-secondary-rgb: var(--gfx-primary-dark-rgb);

  --bs-success: var(--gfx-success);
  --bs-success-rgb: var(--gfx-success-rgb);

  --bs-info: var(--gfx-accent);
  --bs-info-rgb: var(--gfx-accent-rgb);

  --bs-warning: var(--gfx-warning);
  --bs-warning-rgb: var(--gfx-warning-rgb);

  --bs-danger: var(--gfx-error);
  --bs-danger-rgb: var(--gfx-error-rgb);

  --bs-light: var(--gfx-light);
  --bs-light-rgb: var(--gfx-light-rgb);

  --bs-dark: var(--gfx-dark);
  --bs-dark-rgb: var(--gfx-dark-rgb);

  /* Body */
  --bs-body-font-family: var(--gfx-font-body);
  --bs-body-font-size: var(--gfx-text-base);
  --bs-body-font-weight: var(--gfx-font-normal);
  --bs-body-line-height: var(--gfx-leading-relaxed);
  --bs-body-color: var(--gfx-dark);
  --bs-body-color-rgb: var(--gfx-dark-rgb);
  --bs-body-bg: var(--gfx-white);
  --bs-body-bg-rgb: var(--gfx-white-rgb);

  /* Headings */
  --bs-heading-color: var(--gfx-primary-dark);

  /* Links */
  --bs-link-color: var(--gfx-primary);
  --bs-link-color-rgb: var(--gfx-primary-rgb);
  --bs-link-hover-color: var(--gfx-primary-dark);

  /* Border */
  --bs-border-width: var(--gfx-border-width);
  --bs-border-color: var(--gfx-border-color);
  --bs-border-radius: var(--gfx-radius);
  --bs-border-radius-sm: var(--gfx-radius-sm);
  --bs-border-radius-lg: var(--gfx-radius-lg);
  --bs-border-radius-xl: var(--gfx-radius-xl);
  --bs-border-radius-xxl: var(--gfx-radius-2xl);
  --bs-border-radius-pill: var(--gfx-radius-full);
}

/* ========================================
   BASE STYLES
   ======================================== */

body {
  font-family: var(--gfx-font-body);
  font-size: var(--gfx-text-base);
  font-weight: var(--gfx-font-normal);
  line-height: var(--gfx-leading-relaxed);
  color: var(--gfx-dark);
  background-color: var(--gfx-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--gfx-font-heading);
  font-weight: var(--gfx-font-bold);
  line-height: var(--gfx-leading-tight);
  color: var(--gfx-primary-dark);
  margin-bottom: var(--gfx-space-4);
}

h1, .h1 { font-size: var(--gfx-text-4xl); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--gfx-text-3xl); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--gfx-text-2xl); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--gfx-text-xl); }
h5, .h5 { font-size: var(--gfx-text-lg); }
h6, .h6 { font-size: var(--gfx-text-base); }

p {
  margin-bottom: var(--gfx-space-4);
}

a {
  color: var(--gfx-primary);
  text-decoration: none;
  transition: color var(--gfx-transition);
}

a:hover {
  color: var(--gfx-primary-dark);
}

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

/* Buttons - Unified style with color inversion on hover */
.btn {
  font-family: var(--gfx-font-body);
  font-weight: var(--gfx-font-semibold);
  border-radius: var(--gfx-radius);
  border-width: 2px;
  transition: all var(--gfx-transition);
}

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

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gfx-primary-dark);
  border-color: var(--gfx-primary-dark);
  color: var(--gfx-white);
  transform: translateY(-1px);
  box-shadow: var(--gfx-shadow);
}

.btn-secondary {
  background-color: var(--gfx-primary-dark);
  border-color: var(--gfx-primary-dark);
  color: var(--gfx-white);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--gfx-primary);
  border-color: var(--gfx-primary);
  color: var(--gfx-white);
  transform: translateY(-1px);
  box-shadow: var(--gfx-shadow);
}

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

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

/* Cards */
.card {
  border-radius: var(--gfx-radius-lg);
  border-color: var(--gfx-border-color);
  box-shadow: var(--gfx-shadow-sm);
  transition: box-shadow var(--gfx-transition);
}

.card:hover {
  box-shadow: var(--gfx-shadow-md);
}

.card-header {
  background-color: rgba(var(--gfx-light-rgb), 0.5);
  border-bottom-color: var(--gfx-border-color);
}

/* Forms */
.form-control,
.form-select {
  border-color: var(--gfx-border-color);
  border-radius: var(--gfx-radius);
  transition: border-color var(--gfx-transition), box-shadow var(--gfx-transition);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gfx-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--gfx-primary-rgb), 0.25);
}

.form-label {
  font-weight: var(--gfx-font-medium);
  color: var(--gfx-dark);
  margin-bottom: var(--gfx-space-2);
}

/* Alerts */
.alert {
  border-radius: var(--gfx-radius);
}

/* Badges */
.badge {
  font-weight: var(--gfx-font-semibold);
  border-radius: var(--gfx-radius-full);
}

/* Navbar */
.navbar {
  font-family: var(--gfx-font-body);
}

.navbar-brand {
  font-family: var(--gfx-font-heading);
  font-weight: var(--gfx-font-bold);
}

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

.text-primary-dark { color: var(--gfx-primary-dark) !important; }
.text-primary { color: var(--gfx-primary) !important; }
.text-accent { color: var(--gfx-accent) !important; }
.text-gray { color: var(--gfx-gray) !important; }

.bg-primary-dark { background-color: var(--gfx-primary-dark) !important; }
.bg-primary { background-color: var(--gfx-primary) !important; }
.bg-light { background-color: var(--gfx-light) !important; }
.bg-accent { background-color: var(--gfx-accent) !important; }

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

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--gfx-primary) 0%, var(--gfx-primary-dark) 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--gfx-accent) 0%, var(--gfx-primary) 100%);
}

/* Dotted pattern background */
.bg-dotted {
  background-color: var(--gfx-gray-lightest);
  background-image: radial-gradient(#DFDFDF 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Text gradient */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--gfx-primary) 0%, var(--gfx-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}