/* ═══════════════════════════════════════════════════
   LINH NAM — Pro Theme System v2.0
   Unified CSS Variables + Dark/Light + Transitions
   Replaces: dark-mode-shared.css
═══════════════════════════════════════════════════ */

/* ── LIGHT THEME (default) ── */
:root, .theme-light, [data-theme="light"] {
  --bg-primary: #F5F0E8;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAFAF7;
  --bg-input: #FFFFFF;
  --bg-overlay: rgba(0,0,0,0.5);
  --text-primary: #1A1A1A;
  --text-secondary: rgba(26,26,26,0.65);
  --text-tertiary: rgba(26,26,26,0.4);
  --text-inverse: #F5F0E8;
  --border-primary: rgba(0,0,0,0.08);
  --border-hover: rgba(201,168,76,0.4);
  --border-input: rgba(0,0,0,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.15);
  --accent: #8B1A1A;
  --accent-light: #a52222;
  --gold: #C9A84C;
  --gold-soft: rgba(201,168,76,0.08);
  --gold-border: rgba(201,168,76,0.2);
  --scrollbar-track: #E8E0D4;
  --scrollbar-thumb: #C9A84C;
  --skeleton-from: rgba(0,0,0,0.04);
  --skeleton-to: rgba(0,0,0,0.08);
  --navbar-bg: rgba(245,240,232,0.94);
  --navbar-border: rgba(139,26,26,0.08);
  --footer-bg: #1A1A1A;
  --footer-text: rgba(245,240,232,0.5);
  --badge-bg: rgba(0,0,0,0.04);
  --badge-text: rgba(0,0,0,0.5);
  --tag-bg: rgba(201,168,76,0.06);
  --tag-text: #C9A84C;
  --tag-border: rgba(201,168,76,0.15);
}

/* ── DARK THEME ── */
.theme-dark, [data-theme="dark"], .dark-mode {
  --bg-primary: #0f1118;
  --bg-secondary: #161922;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --bg-input: rgba(255,255,255,0.05);
  --bg-overlay: rgba(0,0,0,0.7);
  --text-primary: #F5F0E8;
  --text-secondary: rgba(245,240,232,0.65);
  --text-tertiary: rgba(245,240,232,0.35);
  --text-inverse: #1A1A1A;
  --border-primary: rgba(255,255,255,0.06);
  --border-hover: rgba(201,168,76,0.3);
  --border-input: rgba(255,255,255,0.1);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.25);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.35);
  --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.4);
  --accent: #C9A84C;
  --accent-light: #D4B96A;
  --gold: #C9A84C;
  --gold-soft: rgba(201,168,76,0.08);
  --gold-border: rgba(201,168,76,0.2);
  --scrollbar-track: #0a0c12;
  --scrollbar-thumb: rgba(201,168,76,0.4);
  --skeleton-from: rgba(255,255,255,0.03);
  --skeleton-to: rgba(255,255,255,0.07);
  --navbar-bg: rgba(15,17,24,0.95);
  --navbar-border: rgba(201,168,76,0.1);
  --footer-bg: #080a10;
  --footer-text: rgba(245,240,232,0.4);
  --badge-bg: rgba(255,255,255,0.05);
  --badge-text: rgba(245,240,232,0.5);
  --tag-bg: rgba(201,168,76,0.08);
  --tag-text: #C9A84C;
  --tag-border: rgba(201,168,76,0.2);
}

/* ── GLOBAL OVERRIDES using variables ── */
.theme-dark body, [data-theme="dark"] body { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
.theme-dark .navbar, [data-theme="dark"] .navbar { background: var(--navbar-bg) !important; border-color: var(--navbar-border) !important; }
.theme-dark .navbar.scrolled, [data-theme="dark"] .navbar.scrolled { background: var(--navbar-bg) !important; }
.theme-dark .nav-links a, [data-theme="dark"] .nav-links a { color: var(--text-primary) !important; }
.theme-dark .mobile-toggle, [data-theme="dark"] .mobile-toggle, .theme-dark .mt { color: var(--text-primary) !important; }

/* Headings */
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4,
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4
{ color: var(--text-primary) !important; }

/* Text */
.theme-dark p, [data-theme="dark"] p { color: var(--text-secondary) !important; }
.theme-dark .section-title, [data-theme="dark"] .section-title { color: var(--text-primary) !important; }
.theme-dark .section-title.dark, [data-theme="dark"] .section-title.dark { color: var(--text-primary) !important; }
.theme-dark .section-tag, [data-theme="dark"] .section-tag { color: var(--gold) !important; }
.theme-dark .section-subtitle, [data-theme="dark"] .section-subtitle { color: var(--text-secondary) !important; }

/* Sections */
.theme-dark .section-light, [data-theme="dark"] .section-light { background: var(--bg-primary) !important; }
.theme-dark .section-dark, [data-theme="dark"] .section-dark { background: var(--bg-secondary) !important; }

/* Cards */
.theme-dark .glass-card, .theme-dark .card, .theme-dark .info-card,
.theme-dark .value-card, .theme-dark .pillar-card, .theme-dark .mission-card,
.theme-dark .wing-card, .theme-dark .triad-card, .theme-dark .feature-card,
.theme-dark .event-card, .theme-dark .company-hcard, .theme-dark .job-card,
.theme-dark .career-card, .theme-dark .position-card,
[data-theme="dark"] .glass-card, [data-theme="dark"] .card {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}
.theme-dark .glass-card:hover, .theme-dark .card:hover, .theme-dark .event-card:hover,
.theme-dark .company-hcard:hover, .theme-dark .job-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* Inputs */
.theme-dark input, .theme-dark textarea, .theme-dark select,
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
.theme-dark input::placeholder, .theme-dark textarea::placeholder { color: var(--text-tertiary) !important; }
.theme-dark input:focus, .theme-dark textarea:focus { border-color: var(--gold-border) !important; }
.theme-dark label { color: var(--text-secondary) !important; }

/* Stats */
.theme-dark .stat-value { color: var(--gold) !important; }
.theme-dark .stat-label { color: var(--text-tertiary) !important; }

/* Contact */
.theme-dark .contact-icon-box { background: var(--gold-soft) !important; }
.theme-dark .contact-info-item { color: var(--text-secondary) !important; }

/* FAQ */
.theme-dark .faq-question, .theme-dark .accordion-header { color: var(--text-primary) !important; background: var(--bg-card) !important; }
.theme-dark .faq-answer, .theme-dark .accordion-body { color: var(--text-secondary) !important; }

/* Tags / Badges */
.theme-dark .badge, .theme-dark .tag { background: var(--badge-bg) !important; color: var(--badge-text) !important; }

/* Footer */
.theme-dark .footer { background: var(--footer-bg) !important; border-color: var(--navbar-border) !important; }
.theme-dark .footer-desc, .theme-dark .footer-link { color: var(--footer-text) !important; }
.theme-dark .footer-link:hover { color: var(--gold) !important; }
.theme-dark .footer-bottom { color: var(--text-tertiary) !important; }

/* Scrollbar */
.theme-dark ::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; }
.theme-dark ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; }

/* Skeleton */
.theme-dark .skeleton, .theme-dark .sk,
[data-theme="dark"] .skeleton, [data-theme="dark"] .sk {
  background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%) !important;
  background-size: 400% !important;
}

/* Map / Embed */
.theme-dark .map-placeholder, .theme-dark .map-container { background: var(--bg-card) !important; }

/* Mobile */
@media(max-width:768px) {
  .theme-dark .nav-links, [data-theme="dark"] .nav-links { background: var(--navbar-bg) !important; }
}

/* ── SMOOTH TRANSITIONS ── */
body, .navbar, .section-light, .section-dark, .footer,
.glass-card, .card, .event-card, .company-hcard,
input, textarea, select, h1, h2, h3, h4, p, a {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ═══ FORCE OVERRIDES — Fix !important conflicts from inline styles ═══ */
/* Some pages have body{background:#fff !important} — this overrides it */

.theme-dark body,
.theme-dark body.light-mode,
[data-theme="dark"] body {
  background: var(--bg-primary, #0f1118) !important;
  color: var(--text-primary, #F5F0E8) !important;
}

.theme-light body,
[data-theme="light"] body {
  background: var(--bg-primary, #F5F0E8) !important;
  color: var(--text-primary, #1A1A1A) !important;
}

/* Navbar: consistent across all pages */
.theme-dark .navbar,
.theme-dark .navbar.scrolled,
[data-theme="dark"] .navbar {
  background: rgba(15,17,24,0.95) !important;
  border-bottom-color: rgba(201,168,76,0.1) !important;
}

.theme-light .navbar,
.theme-light .navbar.scrolled,
[data-theme="light"] .navbar {
  background: rgba(245,240,232,0.95) !important;
  border-bottom-color: rgba(139,26,26,0.08) !important;
}

/* Nav links color */
.theme-dark .nav-links a,
[data-theme="dark"] .nav-links a {
  color: rgba(245,240,232,0.8) !important;
}
.theme-dark .nav-links a:hover,
.theme-dark .nav-links a.active-link,
[data-theme="dark"] .nav-links a:hover {
  color: #C9A84C !important;
  opacity: 1 !important;
}

.theme-light .nav-links a,
[data-theme="light"] .nav-links a {
  color: rgba(26,26,26,0.7) !important;
}
.theme-light .nav-links a:hover,
.theme-light .nav-links a.active-link,
[data-theme="light"] .nav-links a:hover {
  color: #8B1A1A !important;
  opacity: 1 !important;
}

/* Hero sections */
.theme-light .hero,
[data-theme="light"] .hero {
  background: linear-gradient(135deg, #1A1A1A 0%, #2d0f0f 60%, #1A1A1A 100%) !important;
}

/* Events section: override hardcoded #0a0a0a */
.theme-light .section-dark,
[data-theme="light"] .section-dark {
  background: #1A1A1A !important;
}