/* ============================================
   HIBRAAR SOLUTIONS — Theme v2.1
   Enhanced Dark/Light Mode — White Header
   ============================================ */

/* ── Light Mode (default) ── */
:root,
[data-theme="light"] {
  --color-bg:            var(--color-cream);
  --color-bg-secondary:  var(--color-white);
  --color-bg-tertiary:   var(--color-neutral-100);
  --color-text:          var(--color-navy);
  --color-text-secondary:var(--color-neutral-600);
  --color-text-muted:    var(--color-neutral-500);
  --color-border:        var(--color-border);
  --color-border-light:  var(--color-border-light);
  --color-nav-bg:        rgba(255, 255, 255, 0.95);
  --color-card-bg:       var(--color-white);
  --color-input-bg:      var(--color-white);
  --color-footer-bg:     var(--color-navy);
  --color-footer-text:   var(--color-white);
  --color-footer-link:   rgba(255, 255, 255, 0.5);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-bg:            #0a0f1a;
  --color-bg-secondary:  #111827;
  --color-bg-tertiary:   #1a2035;
  --color-text:          #f0f0f0;
  --color-text-secondary:#b0b8c4;
  --color-text-muted:    #8892a0;
  --color-border:        rgba(0, 0, 0, 0.12);
  --color-border-light:  rgba(0, 0, 0, 0.08);
  --color-nav-bg:        rgba(255, 255, 255, 0.97);
  --color-card-bg:       #1a2035;
  --color-input-bg:      #1a2035;
  --color-footer-bg:     #060a14;
  --color-footer-text:   #f0f0f0;
  --color-footer-link:   rgba(255, 255, 255, 0.5);
}

/* ── Apply theme tokens to elements ── */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}

/* ============================================
   NAV — WHITE in Both Modes
   ============================================ */
.nav {
  background-color: var(--color-nav-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
}

.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* ── Logo: Always show Primary (dark) logo since nav is always white ── */
.nav__logo--light {
  display: block;
}

.nav__logo--dark {
  display: none;
}

/* ── Nav Links — Dark text on white nav ── */
.nav__link {
  color: var(--color-neutral-600);
}

.nav__link:hover,
.nav__link.active {
  color: var(--color-navy);
}

/* ── Nav Toggle — Dark on white ── */
.nav__toggle span {
  background-color: var(--color-navy);
}

/* ── Theme Toggle — Dark on white ── */
.theme-toggle {
  color: var(--color-navy);
  border-color: var(--color-neutral-200);
}

.theme-toggle:hover {
  background-color: rgba(var(--color-gold-rgb), 0.1);
  border-color: var(--color-gold);
}

/* ============================================
   DARK MODE — Content Area Only
   ============================================ */
[data-theme="dark"] .nav {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .nav__link {
  color: var(--color-neutral-600);
}

[data-theme="dark"] .nav__link:hover,
[data-theme="dark"] .nav__link.active {
  color: var(--color-navy);
}

[data-theme="dark"] .nav__toggle span {
  background-color: var(--color-navy);
}

[data-theme="dark"] .theme-toggle {
  color: var(--color-navy);
  border-color: var(--color-neutral-200);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(var(--color-gold-rgb), 0.1);
  border-color: var(--color-gold);
}

/* ============================================
   HERO — Dark Mode (white background stays)
   ============================================ */
[data-theme="dark"] .hero {
  background: var(--color-navy);
}

[data-theme="dark"] .hero__overlay {
  background: linear-gradient(135deg, rgba(12, 27, 51, 0.75) 0%, rgba(12, 27, 51, 0.65) 50%, rgba(12, 27, 51, 0.7) 100%);
}

[data-theme="dark"] .hero__title {
  color: #ffffff;
}

[data-theme="dark"] .hero__desc {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .hero__scroll {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .hero__grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ============================================
   SERVICE DETAIL — Dark Mode Visibility
   ============================================ */
.service-detail__title {
  color: var(--color-navy);
}

.service-detail__text {
  color: var(--color-neutral-600);
}

.service-detail__list-item {
  color: var(--color-neutral-600);
}

.service-detail__visual {
  background: transparent;
  border: none;
}

[data-theme="dark"] .service-detail__title {
  color: #f0f0f0;
}

[data-theme="dark"] .service-detail__text {
  color: #b0b8c4;
}

[data-theme="dark"] .service-detail__list-item {
  color: #b0b8c4;
}

[data-theme="dark"] .service-detail__visual {
  background: transparent;
  border: none;
}

/* ============================================
   CARDS — Dark Mode Visibility
   ============================================ */
.card,
.contact-form,
.value-card {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .card {
  background: rgba(26, 32, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .card:hover {
  border-color: rgba(201, 168, 76, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .value-card {
  background: rgba(26, 32, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   FORMS — Dark Mode Visibility
   ============================================ */
.form-input,
.form-textarea,
.form-select {
  background-color: var(--color-input-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
  background: rgba(26, 32, 53, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #f0f0f0;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(var(--color-blue-rgb), 0.15);
}

/* ============================================
   TEXT — Light Mode (Default)
   ============================================ */
.section-title {
  color: var(--color-navy, #0C1B33);
}

.section-desc,
.card__text,
.service-detail__text,
.about-hero__text,
.why-card__text,
.value-card__text {
  color: #4B5563;
}

.hero__title {
  color: #ffffff;
}

.hero__desc {
  color: rgba(255, 255, 255, 0.85);
}

.service-detail__list-item {
  color: #4B5563;
}

.card__title {
  color: var(--color-navy, #0C1B33);
}

/* ============================================
   TEXT — Dark Mode Visibility
   ============================================ */
[data-theme="dark"] .section-title {
  color: #ffffff;
}

[data-theme="dark"] .section-desc,
[data-theme="dark"] .card__text,
[data-theme="dark"] .service-detail__text,
[data-theme="dark"] .value-card__text {
  color: #d1d5db;
}

[data-theme="dark"] .card__title {
  color: #f0f0f0;
}

[data-theme="dark"] .hero__title {
  color: #ffffff;
}

[data-theme="dark"] .hero__desc {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .process-item__title {
  color: #f0f0f0;
}

[data-theme="dark"] .process-item__text {
  color: #b0b8c4;
}

[data-theme="dark"] .service-detail__list-item {
  color: #b0b8c4;
}

/* ============================================
   BADGES — Dark Mode
   ============================================ */
.badge--outline {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .badge--outline {
  border-color: rgba(255, 255, 255, 0.15);
  color: #b0b8c4;
}

/* ============================================
   SECTION LABELS — Dark Mode
   ============================================ */
.section-label {
  color: var(--color-gold);
}

/* ============================================
   THEME TOGGLE — Modern
   ============================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
  color: var(--color-text);
}

.theme-toggle:hover {
  background-color: rgba(var(--color-gold-rgb), 0.1);
  border-color: var(--color-gold);
  transform: rotate(15deg);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Show/hide sun/moon based on theme */
.theme-toggle__icon--moon { display: none; }
.theme-toggle__icon--sun  { display: block; }

[data-theme="dark"] .theme-toggle__icon--moon { display: block; }
[data-theme="dark"] .theme-toggle__icon--sun  { display: none; }

/* Light mode: show moon (click to go dark), hide sun */
:root .theme-toggle__icon--moon,
[data-theme="light"] .theme-toggle__icon--moon { display: block; }
:root .theme-toggle__icon--sun,
[data-theme="light"] .theme-toggle__icon--sun  { display: none; }

/* Dark mode: show sun (click to go light), hide moon */
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun  { display: block; }

/* ============================================
   PROCESS ITEMS — Dark Mode
   ============================================ */
[data-theme="dark"] .process-item__content {
  background: rgba(26, 32, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   CONTACT INFO — Dark Mode
   ============================================ */
[data-theme="dark"] .contact-info__item {
  background: rgba(26, 32, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .contact-info__label {
  color: #8892a0;
}

[data-theme="dark"] .contact-info__value {
  color: #f0f0f0;
}

/* ============================================
   CONTACT FORM — Dark Mode
   ============================================ */
[data-theme="dark"] .contact-form {
  background: rgba(26, 32, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   FOOTER — Dark Mode
   ============================================ */
.footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

[data-theme="dark"] .footer {
  background: #040710;
}

/* ============================================
   NAV ACTIONS CONTAINER
   ============================================ */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  z-index: var(--z-overlay);
}

/* ============================================
   RESPONSIVE DARK MODE — Mobile First
   ============================================ */

/* Small Mobile (320px - 479px) */
@media (max-width: 479px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
  .theme-toggle svg {
    width: 16px;
    height: 16px;
  }
}

/* Mobile (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .theme-toggle {
    width: 38px;
    height: 38px;
  }
  .theme-toggle svg {
    width: 17px;
    height: 17px;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }
}

/* Desktop (1280px+) */
@media (min-width: 1280px) {
  .theme-toggle {
    width: 42px;
    height: 42px;
  }
  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }
}

/* Old mobile theme toggle removed - now using sidebar approach */