/**
 * PCTechComVn — Dark Mode Overrides
 * Child Theme CSS Module
 * Version: 1.0.0 (Sprint 0)
 *
 * Dark mode CSS variables.
 * Kích hoạt bởi: theme-toggle.js → document.documentElement.setAttribute('data-theme', 'dark')
 * Tất cả component tự động chuyển dark nhờ override CSS variables.
 */

[data-theme="dark"] {
  --gray-50:      #0a1424;
  --gray-100:     #152238;
  --gray-200:     #243552;
  --gray-500:     #8fa3be;
  --gray-700:     #d0dae8;
  --gray-900:     #eef4fc;
  --white:        #0f1c30;
  --blue-light:   #1a3050;
  --orange-light: #2a2010;
  --shadow:       0 4px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body {
  background: #0a1424;
}

/* Page background gradient */
[data-theme="dark"] .page-bg::before {
  opacity: 0.4;
}

/* Header */
[data-theme="dark"] .pctech-header,
[data-theme="dark"] .header {
  background: rgba(4, 16, 32, 0.95);
}

/* Cards & containers */
[data-theme="dark"] .service-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .testi-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .track-box,
[data-theme="dark"] .why-card,
[data-theme="dark"] .area-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .trust-bar-item {
  background: #12243d;
  border-color: var(--gray-200);
}

/* Modals */
[data-theme="dark"] .modal {
  background: #12243d;
  border-color: var(--gray-200);
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 6, 16, 0.85);
}

/* Booking toast */
[data-theme="dark"] .booking-toast {
  background: #12243d;
  border-color: var(--gray-200);
}

/* Trust pill trên nền tối */
[data-theme="dark"] .trust-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

/* Section tag */
[data-theme="dark"] .section-tag {
  background: rgba(232, 135, 10, 0.15);
}

/* Buttons */
[data-theme="dark"] .btn-outline {
  border-color: var(--gray-200);
  color: var(--gray-700);
}

[data-theme="dark"] .btn-ghost {
  background: #12243d;
  color: var(--gray-700);
}

/* Form inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0a1424;
  border-color: var(--gray-200);
  color: var(--gray-700);
}

/* Theme toggle button */
.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
  .theme-toggle {
    display: none;
  }
}