:root {
  color-scheme: dark;
  --bg: #0e0e0e;
  --bg2: #161616;
  --bg3: #1e1e1e;
  --border: rgba(255,255,255,0.06);
  --text: #e8e8e8;
  --text-secondary: #aaaaaa;
  --muted: #8a8a8a;
  --accent: #f0f0f0;
  --accent-soft: rgba(255,255,255,0.36);
  --nav-bg: rgba(14,14,14,0.85);
  --hero-glow: rgba(255,255,255,0.12);
  --hero-light-core: rgba(255,255,255,0.08);
  --hero-light-shade: rgba(0,0,0,0.18);
  --grid-line: rgba(255,255,255,0.025);
  --modal-backdrop: rgba(0,0,0,0.92);
  --interactive-border: rgba(255,255,255,0.2);
  --hover-border: rgba(255,255,255,0.15);
  --rule-soft: rgba(255,255,255,0.06);
  --tag-border: rgba(255,255,255,0.08);
  --tag-hover-bg: var(--bg3);
  --ghost-text: rgba(255,255,255,0.06);
  --button-hover-bg: #fff;
  --btn-primary-hover-bg: #ffffff;
  --control-bg: transparent;
}

:root[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ee;
  --bg2: #fffaf3;
  --bg3: #ece5da;
  --border: rgba(31,29,24,0.12);
  --text: #1e1c18;
  --text-secondary: #57534e;
  --muted: #6f685f;
  --accent: #11100e;
  --accent-soft: rgba(17,16,14,0.32);
  --nav-bg: rgba(247,244,238,0.88);
  --hero-glow: rgba(255,255,255,0.92);
  --hero-light-core: rgba(255,255,255,0.72);
  --hero-light-shade: rgba(115,91,57,0.09);
  --grid-line: rgba(31,29,24,0.055);
  --modal-backdrop: rgba(247,244,238,0.94);
  --interactive-border: rgba(31,29,24,0.24);
  --hover-border: rgba(31,29,24,0.2);
  --rule-soft: rgba(31,29,24,0.08);
  --tag-border: rgba(31,29,24,0.1);
  --tag-hover-bg: var(--bg3);
  --ghost-text: rgba(31,29,24,0.08);
  --button-hover-bg: #ffffff;
  --btn-primary-hover-bg: #000000;
  --control-bg: rgba(255,255,255,0.68);
}

:root {
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9.5 3.5 14 8l-4.5 4.5'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3.5 9.5 8 14l4.5-4.5'/%3E%3C/svg%3E");
  --icon-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}