/* XHUI8: warm wood, cream and olive palette. */
:root[data-theme="light"] {
  --color-bg: #fffdf7;
  --color-bg-soft: #fff8eb;
  --color-bg-mute: #f7ecd3;
  --color-text: #8b795e;
  --color-text-secondary: #a58f6c;
  --color-text-muted: #baa784;
  --color-accent: #d8a14b;
  --color-accent-secondary: #c5ce8a;
  --color-accent-rgb: 216, 161, 75;
  --color-border: rgba(112, 84, 46, .13);
  --color-border-hover: rgba(112, 84, 46, .28);
  --warm-header-bg: rgba(255, 250, 241, .78);
  --warm-header-scrolled: rgba(255, 250, 241, .95);
  --warm-nav-color: #c99b54;
  --warm-icon-color: #d5ba6b;
}
:root[data-theme="dark"] {
  --color-bg: #29271e;
  --color-bg-soft: #353025;
  --color-bg-mute: #423a2b;
  --color-text: #fff2d4;
  --color-text-secondary: #e5d2ac;
  --color-text-muted: #cfbc96;
  --color-accent: #f5d38a;
  --color-accent-secondary: #dce5a4;
  --color-accent-rgb: 245, 211, 138;
  --color-border: rgba(216, 189, 145, .15);
  --color-border-hover: rgba(216, 189, 145, .30);
  --warm-header-bg: rgba(34, 29, 22, .88);
  --warm-header-scrolled: rgba(34, 29, 22, .97);
  --warm-nav-color: #f6dfaa;
  --warm-icon-color: #dce5a4;
}
html[data-theme] .header {
  background: var(--warm-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--color-border);
}
html[data-theme] .header.scrolled { background: var(--warm-header-scrolled); }
html[data-theme] .header .nav-btn,
html[data-theme] .header .nav-btn-text,
html[data-theme] .header .theme-toggle,
html[data-theme] .header .search-trigger { color: var(--warm-nav-color); }
html[data-theme] .header .nav-btn i,
html[data-theme] .header .nav-btn svg { color: var(--warm-icon-color); }
html[data-theme] .header .nav-btn:hover,
html[data-theme] .header .dropdown-item:hover { color: var(--color-accent-secondary); }
html[data-theme] .search-trigger,
html[data-theme] .search-box { border-color: var(--color-border-hover); }
html[data-theme] .hero-name {
  color: #efc875 !important;
  background: none !important;
  -webkit-text-fill-color: #efc875 !important;
  -webkit-text-stroke-color: #efc875 !important;
  text-shadow: 0 1px 2px rgba(102, 74, 35, .48), 0 0 18px rgba(255, 249, 226, .6);
}
html[data-theme] .hero-tagline {
  color: #ead29f !important;
  text-shadow: 0 1px 3px rgba(90, 65, 30, .65), 0 0 14px rgba(255, 247, 219, .45);
}
html[data-theme] .hero-bio {
  color: #f7ecd2 !important;
  text-shadow: 0 1px 3px rgba(78, 58, 29, .8), 0 0 10px rgba(255, 247, 219, .35);
}
html[data-theme] .typewriter-cursor { background-color: #e8c16d; }
html[data-theme] .hero-avatar { --avatar-glow: #f0d99e; }
html[data-theme] .hero-social .social-link {
  color: #c49a54;
  background: rgba(255, 248, 229, .8);
}
html[data-theme] .compass-title,
html[data-theme] .article-name { color: var(--color-text); }
html[data-theme] .compass-subtitle,
html[data-theme] .compass-item,
html[data-theme] .article-desc { color: var(--color-text-secondary); }
html[data-theme] .compass-item i,
html[data-theme] .compass-item svg { color: var(--warm-icon-color); }
html[data-theme] .compass-item:hover { color: var(--color-accent); }
html[data-theme] .article-index,
html[data-theme] .article-views { color: var(--color-text-muted); }
html[data-theme] .back-to-top { color: var(--color-accent); }
:root[data-theme="light"] .compass-item {
  color: #b5955d;
  text-shadow: 0 1px 7px rgba(255, 248, 230, .85);
}
:root[data-theme="light"] .compass-item i,
:root[data-theme="light"] .compass-item svg { color: #d7b868; }
html[data-theme="dark"] .hero-name {
  color: #fff1c9 !important;
  -webkit-text-fill-color: #fff1c9 !important;
  -webkit-text-stroke-color: #fff1c9 !important;
  text-shadow: 0 2px 12px rgba(30, 22, 12, .6);
}
html[data-theme="dark"] .hero-tagline {
  color: #fff3d6 !important;
  text-shadow: 0 1px 8px rgba(30, 22, 12, .75);
}
html[data-theme="dark"] .hero-bio {
  color: #f6e6c3 !important;
  text-shadow: 0 1px 8px rgba(30, 22, 12, .8);
}

:root[data-theme="light"] .compass-title { color: #caa561; }
