/*
 * Theme Variables - Auto-generated from company JSON
 * Do not edit this file directly - it will be overwritten by the build script
 */

:root {
  /* Primary Colors */
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-primary-light: #629bf7;
  --color-primary-rgb: 59, 130, 246;
  
  /* Secondary Colors */
  --color-secondary: #64748B;
  --color-accent: #F97316;
  
  /* Text Colors */
  --color-text: #475569;
  --color-text-muted: #b5b9bf;
  --color-heading: #0F172A;
  
  /* Background Colors */
  --color-bg: #ffffff;
  --color-bg-light: #F8FAFC;
  --color-bg-dark: #020617;
  
  /* Gradient */
  --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  
  /* Fonts */
  --font-primary: 'Open Sans', sans-serif;
  --font-heading: 'Dosis', 'Open Sans', sans-serif;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Spacing */
  --section-padding: 100px;
  --container-width: 1200px;
}

/* Override Bootstrap and Theme Colors */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.btn-primary { 
  background-color: var(--color-primary) !important; 
  border-color: var(--color-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus { 
  background-color: var(--color-primary-dark) !important; 
  border-color: var(--color-primary-dark) !important;
}
.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.border-primary { border-color: var(--color-primary) !important; }

/* Link Colors */
a { color: var(--color-primary); }
a:hover, a:focus { color: var(--color-primary-dark); }

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--color-primary);
}

/* Selection */
::selection {
  background: var(--color-primary);
  color: #fff;
}
::-moz-selection {
  background: var(--color-primary);
  color: #fff;
}

/* Typed Cursor */
[data-typing].text-primary + .typed-cursor {
  color: var(--color-primary);
}

/* Pre/Code */
pre {
  border-left-color: var(--color-primary);
}

/* Navbar */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--color-primary) !important;
}

.navbar-stick.stick .navbar .nav-link:hover,
.navbar-stick.stick .navbar .nav-link:focus {
  color: var(--color-primary) !important;
}

/* Header */
.header .btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Sections */
.section.bg-gradient {
  background: var(--gradient-primary);
}

/* Cards */
.card:hover {
  border-color: var(--color-primary);
}

/* Features */
.feature-1 .feature:hover .feature-icon,
.feature-2 .feature:hover .feature-icon,
.feature-3 .feature:hover .feature-icon,
.feature-4 .feature:hover .feature-icon {
  color: var(--color-primary);
}

/* Pricing */
.pricing-1 .plan:hover,
.pricing-2 .plan:hover,
.pricing-3 .plan:hover,
.pricing-4 .plan:hover {
  border-color: var(--color-primary);
}

.pricing-1 .plan.popular,
.pricing-2 .plan.popular,
.pricing-3 .plan.popular,
.pricing-4 .plan.popular {
  border-color: var(--color-primary);
}

/* Testimonials */
.testimonial-1 .testimonial:hover,
.testimonial-2 .testimonial:hover {
  border-color: var(--color-primary);
}

/* Portfolio */
.portfolio-1 .portfolio-item:hover .portfolio-overlay,
.portfolio-2 .portfolio-item:hover .portfolio-overlay {
  background-color: rgba(var(--color-primary-rgb), 0.9);
}

/* Team */
.team-1 .team-member:hover,
.team-2 .team-member:hover {
  border-color: var(--color-primary);
}

/* Tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

/* Pagination */
.page-link {
  color: var(--color-primary);
}
.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Forms */
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

/* Social Icons */
.social a:hover {
  color: var(--color-primary);
}

/* Scroll to Top */
.scroll-top {
  background-color: var(--color-primary);
}
.scroll-top:hover {
  background-color: var(--color-primary-dark);
}

/* Footer */
.footer a:hover {
  color: var(--color-primary);
}

/* Accordion */
.accordion .card-title a:not(.collapsed) {
  color: var(--color-primary);
}

/* Custom Utility Classes */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-primary:hover {
  color: var(--color-primary) !important;
}

.icon-primary {
  color: var(--color-primary);
}

.border-gradient {
  border-image: var(--gradient-primary) 1;
}