/* Shared site styles (generated) */
:root{
  --clr-primary:#2d6a4f;
  --clr-primary-light:#40916c;
  --clr-primary-lighter:#52b788;
  --clr-primary-pale:#b7e4c7;
  --clr-primary-bg:#d8f3dc;
  --clr-accent:#1b4332;
  --clr-accent-gold:#d4a259;
  --clr-bg:#f0faf4;
  --clr-white:#ffffff;
  --clr-text:#1b1b1b;
  --clr-text-muted:#555;
  --clr-text-light:#777;
  --clr-border:#c8e6d0;
  --clr-winner:#d4edda;
  --clr-winner-text:#155724;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 4px 24px rgba(0,0,0,.07);
  --shadow-lg:0 12px 48px rgba(0,0,0,.10);
  --transition:0.3s cubic-bezier(.4,0,.2,1);
  --max-width:1100px;

  /* Token aliases for shared components */
  --clr-muted: var(--clr-text-muted);
  --bg: var(--clr-bg);
  --text: var(--clr-text);
  --muted: var(--clr-text-muted);
  --card: var(--clr-white);
  --card-2: #f7fffa;
  --border: var(--clr-border);
  --accent: var(--clr-accent);
  --accent-2: var(--clr-primary-light);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--clr-bg);
  color:var(--clr-text);
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%;height:auto}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}
header,footer{width:100%}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}


/* =========================
   Dark mode support
   ========================= */
html[data-theme="dark"]{
  --card: var(--clr-card);
  --card-2: #0b1220;
  --border: var(--clr-border);
  --border: var(--clr-border);
  --card: var(--clr-card);
  --card-2: #0b1220;
  --clr-bg:#0c1410;
  --clr-white:#101a14;
  --clr-text:#eef5f0;
  --clr-text-muted:#c9d6cf;
  --clr-text-light:#a7b9b0;
  --clr-border:#1f3328;
  --shadow:0 6px 30px rgba(0,0,0,.45);
  --shadow-lg:0 16px 70px rgba(0,0,0,.55);
  --bg: var(--clr-bg);
  --text: var(--clr-text);
  --muted: var(--clr-text-muted);
  --accent: var(--clr-accent);
  --accent-2: var(--clr-primary-lighter);
}
/* Improve native form controls in dark mode */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{
  color:var(--clr-text);
  background:rgba(255,255,255,.04);
  border-color:var(--clr-border);
}
html[data-theme="dark"] a{color:var(--clr-primary-lighter);}

/* =========================
   Global header / footer
   ========================= */
.nav-actions{display:flex; align-items:center; gap:10px;}
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--clr-border);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:transform var(--transition), background var(--transition), border-color var(--transition);
}
.theme-toggle:hover{transform:translateY(-1px);}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.06);}
.theme-icon{font-size:18px; line-height:1;}

.footer{padding:28px 18px; border-top:1px solid var(--clr-border); background:rgba(255,255,255,.5);}
html[data-theme="dark"] .footer{background:rgba(255,255,255,.02);}
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-left{min-width:260px; flex:1;}
.footer-links{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.footer-links a{color:var(--clr-text-muted); text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}
.disclaimer{margin:10px 0 0; color:var(--clr-text-light); font-size:0.95rem; line-height:1.5;}

html[data-theme="dark"] body {
  --accent-color: #4ade80;
  --text-color: #e5e7eb;
  --muted-color: #9ca3af;
}

/* ===== Dark Mode Contrast Fixes ===== */
body.dark .protocol-box,
body.dark .highlight-box,
body.dark .callout,
body.dark .card {
  background: #1f2937 !important;   /* dark slate */
  color: #f3f4f6 !important;        /* high contrast text */
}

body.dark .protocol-box p,
body.dark .highlight-box p,
body.dark .callout p,
body.dark .card p {
  color: #e5e7eb !important;
}

body.dark .protocol-box h1,
body.dark .protocol-box h2,
body.dark .protocol-box h3,
body.dark .highlight-box h1,
body.dark .highlight-box h2,
body.dark .highlight-box h3 {
  color: #ffffff !important;
}

body.dark .protocol-box {
  border-left: 4px solid #4ade80; /* keep green accent readable */
}