/* Base (light) */
:root{
  --bg:#fafafa; --fg:#111; --muted:#666; --card:#fff; --rule:#eaeaea; --link:#0a66c2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{padding:2.5rem 1rem;text-align:center;background:#111;color:#fff}
header h1{margin:0 0 .25rem;font-size:2rem}
header p{margin:0;color:#ddd}
main{max-width:900px;margin:2rem auto;padding:0 1rem}
h2{margin:2rem 0 0.5rem}
ul{padding-left:1.25rem}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
section{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:1rem;margin:1rem 0}
#contact a{word-break:break-word}

/* Auto dark via system setting */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0f; --fg:#e7e9ee; --muted:#a0a3ab; --card:#11121a; --rule:#222534; --link:#56a8ff;
  }
  header{background:#0e0f16;color:#e7e9ee}
  header p{color:#b5b8c2}
}
/* Toggle button */
#theme-toggle {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg);
  padding: .4rem .6rem;
  border-radius: 10px;
  cursor: pointer;
}
#theme-toggle:hover {
  opacity: .9;
}

/* Theme scopes (override Option A) */
:root[color-scheme="light"] {
  --bg:#fafafa; --fg:#111; --muted:#666; --card:#fff; --rule:#eaeaea; --link:#0a66c2;
}
:root[color-scheme="dark"] {
  --bg:#0b0b0f; --fg:#e7e9ee; --muted:#a0a3ab; --card:#11121a; --rule:#222534; --link:#56a8ff;
}