/* Apple light and dark surfaces. Light is the default. Dark follows the toggle or the system. */
html{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){color-scheme:dark;}
}
:root[data-theme="dark"]{
  --bg:#000;--bg2:#1c1c1e;--ink:#f5f5f7;--muted:#98989d;--rule:#38383a;
  --accent:#f5f5f7;--accent2:#0a84ff;
  --dm-nav-bg:rgba(0,0,0,.86);--dm-input-bg:#2c2c2e;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000;--bg2:#1c1c1e;--ink:#f5f5f7;--muted:#98989d;--rule:#38383a;
    --accent:#f5f5f7;--accent2:#0a84ff;
    --dm-nav-bg:rgba(0,0,0,.86);--dm-input-bg:#2c2c2e;
  }
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .mobile-menu,
:root[data-theme="dark"] .sheet,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal-content{
  background:var(--bg);color:var(--ink);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{
    background:#000;color:#f5f5f7;
  }
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .sheet,
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .notice{
    background:#1c1c1e;color:#f5f5f7;border-color:#38383a;
  }
  :root:not([data-theme="light"]) .nav{
    background:rgba(0,0,0,.86);border-bottom-color:#38383a;
  }
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) textarea,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) .ghost,
  :root:not([data-theme="light"]) button:not(.primary):not(.cta):not(.btn-p){
    background:#2c2c2e;color:#f5f5f7;border-color:#38383a;
  }
  :root:not([data-theme="light"]) .primary,
  :root:not([data-theme="light"]) .cta,
  :root:not([data-theme="light"]) .btn-p,
  :root:not([data-theme="light"]) a.primary{
    background:#f5f5f7;color:#1d1d1f;border-color:#f5f5f7;
  }
  :root:not([data-theme="light"]) .nav a,
  :root:not([data-theme="light"]) .lead,
  :root:not([data-theme="light"]) .sub,
  :root:not([data-theme="light"]) .py,
  :root:not([data-theme="light"]) .note{color:#98989d;}
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3{color:#f5f5f7;}
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .sheet,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .notice{background:#1c1c1e;color:#f5f5f7;border-color:#38383a;}
:root[data-theme="dark"] .nav{background:rgba(0,0,0,.86);border-bottom-color:#38383a;}
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .ghost,
:root[data-theme="dark"] button:not(.primary):not(.cta):not(.btn-p){
  background:#2c2c2e;color:#f5f5f7;border-color:#38383a;
}
:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .cta,
:root[data-theme="dark"] .btn-p,
:root[data-theme="dark"] a.primary{background:#f5f5f7;color:#1d1d1f;border-color:#f5f5f7;}
:focus-visible{outline:2px solid #0a84ff;outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}