/* ================================
   Light (default) & dark theme tokens
   ================================ */

:root {
  --color-accent: #c2410c;
  --color-accent-hover: #9a3412;
  --color-accent-glow: rgba(194, 65, 12, 0.2);
  --color-accent-light: rgba(194, 65, 12, 0.08);

  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-muted: #f1f5f9;
  --color-bg-card: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-dark: #f1f5f9;

  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  --color-border: rgba(15, 23, 42, 0.1);
  --color-border-hover: rgba(15, 23, 42, 0.18);

  --color-on-accent: #ffffff;
  --color-selection-fg: #ffffff;

  --color-nav-bar-bg: rgba(255, 255, 255, 0.94);
  --color-nav-bar-shadow: rgba(15, 23, 42, 0.1);
  --color-nav-home-link: rgba(255, 255, 255, 0.92);
  --color-nav-home-link-hover: #ffffff;

  --color-topbar-bg: #f1f5f9;
  --color-topbar-border: rgba(15, 23, 42, 0.08);
  --color-topbar-link: #475569;
  --color-topbar-link-hover: var(--color-accent);

  --color-footer-heading: #0f172a;
  --color-footer-link: #64748b;
  --color-footer-link-hover: var(--color-accent);
  --color-footer-fg-muted: #94a3b8;
  --color-footer-bar-bg: #e2e8f0;
  --color-footer-bar-border: rgba(15, 23, 42, 0.08);

  --gradient-hero-fw: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%);
  --color-fw-hero-title: #0f172a;
  --gradient-hero-overlay: linear-gradient(
    105deg,
    rgba(15, 23, 42, 0.88) 0%,
    rgba(15, 23, 42, 0.55) 45%,
    rgba(15, 23, 42, 0.35) 100%
  );
  --color-hero-on-image: #ffffff;
  --color-hero-on-image-muted: rgba(255, 255, 255, 0.72);
  --color-hero-stat-border: rgba(255, 255, 255, 0.15);

  --color-mobile-nav-bg: rgba(255, 255, 255, 0.98);
  --color-mobile-nav-shadow: rgba(15, 23, 42, 0.12);
  --color-overlay: rgba(15, 23, 42, 0.35);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 40px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-glow-accent: 0 4px 20px rgba(194, 65, 12, 0.2);
}

[data-theme="dark"] {
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
  --color-accent-glow: rgba(217, 119, 6, 0.25);
  --color-accent-light: rgba(217, 119, 6, 0.1);

  --color-bg: #18181b;
  --color-bg-secondary: #1f1f23;
  --color-bg-muted: #1f1f23;
  --color-bg-card: #27272a;
  --color-bg-elevated: #3f3f46;
  --color-bg-dark: #0f0f11;

  --color-text: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;

  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  --color-on-accent: #ffffff;
  --color-selection-fg: #0f172a;

  --color-nav-bar-bg: rgba(15, 23, 42, 0.97);
  --color-nav-bar-shadow: rgba(0, 0, 0, 0.3);
  --color-nav-home-link: rgba(255, 255, 255, 0.85);
  --color-nav-home-link-hover: #ffffff;

  --color-topbar-bg: #0f0f11;
  --color-topbar-border: rgba(255, 255, 255, 0.06);
  --color-topbar-link: rgba(255, 255, 255, 0.6);
  --color-topbar-link-hover: var(--color-accent);

  --color-footer-heading: #ffffff;
  --color-footer-link: rgba(255, 255, 255, 0.5);
  --color-footer-link-hover: var(--color-accent);
  --color-footer-fg-muted: rgba(255, 255, 255, 0.4);
  --color-footer-bar-bg: #060a12;
  --color-footer-bar-border: rgba(255, 255, 255, 0.06);

  --gradient-hero-fw: linear-gradient(135deg, #0f0f11 0%, #18181b 40%, #1f1f23 100%);
  --color-fw-hero-title: #ffffff;
  --gradient-hero-overlay: linear-gradient(
    105deg,
    rgba(15, 15, 17, 0.97) 0%,
    rgba(15, 15, 17, 0.7) 40%,
    rgba(15, 15, 17, 0.5) 65%,
    rgba(15, 15, 17, 0.2) 100%
  );
  --color-hero-on-image: #ffffff;
  --color-hero-on-image-muted: rgba(255, 255, 255, 0.65);
  --color-hero-stat-border: rgba(255, 255, 255, 0.08);

  --color-mobile-nav-bg: rgba(15, 23, 42, 0.98);
  --color-mobile-nav-shadow: rgba(0, 0, 0, 0.3);
  --color-overlay: rgba(0, 0, 0, 0.4);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow-accent: 0 4px 20px rgba(217, 119, 6, 0.25);
}

/* ----------------------------------
   Theme toggle
   ---------------------------------- */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

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

.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

/* ----------------------------------
   Header / nav / footer (theme-aware)
   ---------------------------------- */
::selection {
  color: var(--color-selection-fg);
}

.top-bar {
  background: var(--color-topbar-bg);
  border-bottom: 1px solid var(--color-topbar-border);
}

.top-bar-item {
  color: var(--color-topbar-link);
}

.top-bar-item a {
  color: var(--color-topbar-link);
}

.top-bar-item a:hover {
  color: var(--color-topbar-link-hover);
}

.btn-quote {
  color: var(--color-on-accent);
}

.btn-quote:hover {
  color: var(--color-on-accent);
}

.nav-bar {
  background: var(--color-nav-bar-bg);
}

.nav-bar.scrolled {
  box-shadow: 0 4px 20px var(--color-nav-bar-shadow);
}

body.home .nav-bar:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}

/* Light mode: dark nav text at top of homepage (readable on hero) */
html:not([data-theme="dark"]) body.home .nav-bar:not(.scrolled) {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--color-border);
}

html:not([data-theme="dark"]) body.home .nav-bar:not(.scrolled) .primary-menu > li > a {
  color: var(--color-text-secondary);
}

html:not([data-theme="dark"]) body.home .nav-bar:not(.scrolled) .primary-menu > li > a:hover,
html:not([data-theme="dark"]) body.home .nav-bar:not(.scrolled) .primary-menu > li.current-menu-item > a {
  color: var(--color-accent);
  background: var(--color-accent-light);
}

/* Dark mode: light nav text over hero image */
[data-theme="dark"] body.home .nav-bar:not(.scrolled) .primary-menu > li > a {
  color: var(--color-nav-home-link);
}

[data-theme="dark"] body.home .nav-bar:not(.scrolled) .primary-menu > li > a:hover,
[data-theme="dark"] body.home .nav-bar:not(.scrolled) .primary-menu > li.current-menu-item > a {
  color: var(--color-nav-home-link-hover);
  background: rgba(255, 255, 255, 0.1);
}

.menu-toggle-bar {
  background: var(--color-text);
}

.hero-overlay {
  background: var(--gradient-hero-overlay);
}

.hero-content h1,
.hero-stat-number {
  color: var(--color-hero-on-image);
}

.hero-content p,
.hero-features span,
.hero-stat-label {
  color: var(--color-hero-on-image-muted);
}

.hero-stats {
  border-left-color: var(--color-hero-stat-border);
}

.hero-btn,
.hero-btn:hover {
  color: var(--color-on-accent);
}

.fw-hero {
  background: var(--gradient-hero-fw);
}

.fw-hero h1,
.fw-hero .page-title {
  color: var(--color-fw-hero-title);
}

.footer-title {
  color: var(--color-footer-heading);
}

.footer-links a,
.footer-contact a,
.footer-contact li {
  color: var(--color-footer-link);
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--color-footer-link-hover);
}

.footer-copyright {
  background: var(--color-footer-bar-bg);
  color: var(--color-footer-fg-muted);
  border-top-color: var(--color-footer-bar-border);
}

.entry-card .entry-read-more,
.entry-card .entry-read-more:hover {
  color: var(--color-on-accent);
}

@media (max-width: 768px) {
  .primary-nav {
    background: var(--color-mobile-nav-bg);
    box-shadow: -10px 0 40px var(--color-mobile-nav-shadow);
  }

  .nav-overlay {
    background: var(--color-overlay);
  }
}