/* FuzonERP Premium Light Theme CSS (Blue, Orange & White) */

:root {
  /* Brand Color Palette */
  --color-brand-blue: #1A4FCC;
  --color-brand-blue-hover: #113A94;
  --color-brand-orange: #E85A0E;
  --color-brand-orange-hover: #C74D0A;
  --color-brand-white: #FFFFFF;
  --color-brand-light-blue: #F0F4FF;
  --color-brand-light-orange: #FFF7ED;
  
  /* Sentry Tokens - Light Theme Overrides */
  --color-sentry-primary: #1A4FCC !important;
  --color-sentry-ink: #0F172A !important;
  --color-sentry-lime: #E85A0E !important;
  --color-sentry-pink: #1A4FCC !important;
  --color-sentry-violet: #2563EB !important;
  --color-sentry-violet-deep: #EFF6FF !important; /* Light blue container */
  --color-sentry-violet-mid: #475569 !important;
  
  --color-canvas: #F8FAFC !important;
  --color-surface-1: #FFFFFF !important;
  --color-surface-2: #F1F5F9 !important;
  --color-hairline: #E2E8F0 !important;
  --color-hairline-soft: #F1F5F9 !important;
  --color-fin-orange: #E85A0E !important;
  
  --color-surface-dark: #F8FAFC !important;
  --color-surface-night: #FFFFFF !important;
  --color-surface-light: #FFFFFF !important;
  
  --color-hairline-violet: #E2E8F0 !important;
  --color-hairline-cool: #E2E8F0 !important;
  --color-hairline-cloud: #F1F5F9 !important;
  
  --color-on-dark-muted: #475569 !important;
  --color-on-dark-faint: #F1F5F9 !important;
}

/* Base resets for Light Mode */
body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  font-family: "Rubik", "Inter", -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Typography resets */
h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: "Space Grotesk", "Inter", sans-serif !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
}

p, li, .text-on-dark-muted {
  color: #475569 !important;
}

span.text-white, div.text-white {
  color: #0F172A !important;
}

/* Buttons System */
.btn-primary, a.btn-primary, button.btn-primary {
  background-color: var(--color-brand-blue) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 4px 6px -1px rgba(26, 79, 204, 0.1), 0 2px 4px -1px rgba(26, 79, 204, 0.06) !important;
}
.btn-primary:hover {
  background-color: var(--color-brand-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 15px -3px rgba(26, 79, 204, 0.2), 0 4px 6px -2px rgba(26, 79, 204, 0.1) !important;
}

.btn-inverted, a.btn-inverted, button.btn-inverted {
  background-color: var(--color-brand-orange) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 4px 6px -1px rgba(232, 90, 14, 0.1), 0 2px 4px -1px rgba(232, 90, 14, 0.06) !important;
}
.btn-inverted:hover {
  background-color: var(--color-brand-orange-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 15px -3px rgba(232, 90, 14, 0.2), 0 4px 6px -2px rgba(232, 90, 14, 0.1) !important;
}

.btn-ghost-dark, a.btn-ghost-dark, button.btn-ghost-dark {
  background-color: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease-in-out !important;
}
.btn-ghost-dark:hover {
  background-color: #F8FAFC !important;
  color: var(--color-brand-blue) !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

/* Cards & Grid Items */
.card-dark, .bg-surface-night, .bg-surface-dark {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card-dark:hover {
  border-color: var(--color-brand-blue) !important;
  box-shadow: 0 10px 25px -5px rgba(26, 79, 204, 0.08), 0 8px 10px -6px rgba(26, 79, 204, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* Specific Card Headings */
.card-dark h3, .card-dark h2, .card-dark h4 {
  color: #0F172A !important;
}

/* Accent colors in sections */
.text-sentry-lime {
  color: var(--color-brand-orange) !important;
}
.text-sentry-pink {
  color: var(--color-brand-blue) !important;
}

/* Icon Container styling for perfect contrast */
.w-12.h-12.rounded-lg.bg-sentry-violet-deep,
.w-16.h-16.rounded-xl.bg-sentry-violet-deep {
  background-color: var(--color-brand-light-blue) !important;
  border: 1px solid #DBEAFE !important;
  transition: all 0.2s ease-in-out !important;
}
.card-dark:hover .bg-sentry-violet-deep {
  background-color: var(--color-brand-blue) !important;
}
.card-dark:hover .bg-sentry-violet-deep i,
.card-dark:hover .bg-sentry-violet-deep svg {
  color: #FFFFFF !important;
}

.bg-sentry-violet-deep i,
.bg-sentry-violet-deep svg {
  color: var(--color-brand-blue) !important;
  transition: all 0.2s ease-in-out !important;
}

/* FAQ Rows styling */
.faq-item {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}
.faq-item:hover {
  border-color: var(--color-brand-blue) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}
.faq-btn {
  color: #0F172A !important;
  font-weight: 600 !important;
  outline: none !important;
}
.faq-icon {
  color: var(--color-brand-blue) !important;
}
.faq-answer {
  border-top: 1px solid #F1F5F9 !important;
}

/* Accent Banner */
.from-sentry-pink.to-sentry-violet {
  background-image: linear-gradient(135deg, #1A4FCC 0%, #2563EB 50%, #E85A0E 100%) !important;
  border: none !important;
}
.from-sentry-pink.to-sentry-violet h2,
.from-sentry-pink.to-sentry-violet p {
  color: #FFFFFF !important;
}
.from-sentry-pink.to-sentry-violet span.text-sentry-lime {
  color: #FFF7ED !important;
  text-decoration: underline !important;
}

/* Inputs fields */
input, textarea, select {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  color: #0F172A !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease-in-out !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 79, 204, 0.15) !important;
  outline: none !important;
}

/* Squiggle Divider */
.squiggle-divider {
  background: url('data:image/svg+xml;utf8,<svg width="40" height="12" viewBox="0 0 40 12" xmlns="http://www.w3.org/2000/svg"><path d="M0 6 Q10 0, 20 6 T40 6" fill="none" stroke="%231A4FCC" stroke-width="3" stroke-linecap="round"/></svg>') repeat-x !important;
}

/* Dashboard Mockup styling overrides */
.bg-surface-dark div.font-display.text-2xl.text-white {
  color: #0F172A !important;
}
.bg-surface-dark div.font-display.text-2xl.text-sentry-lime {
  color: var(--color-brand-orange) !important;
}
.bg-surface-dark div.font-display.text-2xl.text-sentry-pink {
  color: var(--color-brand-blue) !important;
}

/* Form success overlay */
.form-success {
  background-color: #0F172A !important;
}

/* Badge design */
.inline-flex.items-center.gap-2.px-3.py-1.5.bg-sentry-lime\/10 {
  background-color: var(--color-brand-light-blue) !important;
  border-color: #DBEAFE !important;
  color: var(--color-brand-blue) !important;
}
.inline-flex.items-center.gap-2.px-3.py-1.5.bg-sentry-lime\/10 span.bg-sentry-lime {
  background-color: var(--color-brand-blue) !important;
}

/* Micro-animations and highlights */
.hover-scale {
  transition: transform 0.2s ease-in-out;
}
.hover-scale:hover {
  transform: scale(1.02);
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Premium Hover Animations & Micro-interactions */

/* 1. Desktop Nav Link Underline Transition */
nav ul li a {
  position: relative;
  transition: color 0.2s ease;
}
nav ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-brand-blue);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
nav ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
nav ul li a:hover {
  color: var(--color-brand-blue) !important;
}

/* 2. Interactive Feature Explorer Tabs Animation */
.feat-tab-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.feat-tab-btn:hover {
  transform: translateX(4px) scale(1.01) !important;
  border-color: var(--color-brand-blue) !important;
  box-shadow: 0 4px 12px rgba(26, 79, 204, 0.04) !important;
}

/* 3. Social Icons Rotate & Lift */
.footer-social-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.footer-social-link:hover {
  transform: translateY(-3px) rotate(8deg) !important;
}

/* 4. Enhanced Button Glows and Shadows */
.btn-primary, .btn-inverted, .btn-ghost-dark {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 5. Glow Effect for Cards */
.card-dark {
  position: relative;
  overflow: hidden;
}
.card-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26, 79, 204, 0.02) 0%, rgba(232, 90, 14, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card-dark:hover::before {
  opacity: 1;
}

/* 6. Icon scale on card hover */
.card-dark:hover .w-12 {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 4px 10px rgba(26, 79, 204, 0.1) !important;
}
.card-dark .w-12 {
  transition: all 0.3s ease;
}