/* American Adventurer — shared light/dark skin.
   Light (default) = topo quad in daylight. Dark = instrument cluster at dusk.
   Loaded after each page's inline <style>; the [data-theme="dark"] selectors
   win on specificity so they override the light tokens + a few pine-as-text spots. */

:root[data-theme="dark"]{
  --page:#151d18;
  --paper:#1e2a24;
  --paper-2:#24302a;
  --paper-lite:#26332c;
  --ink:#e9e3d4;
  --ink-2:#b6c2b7;
  --muted:#8ba093;
  --brown:#b49a72;
  --hairline:rgba(233,226,208,.15);
  --hairline-2:rgba(233,226,208,.08);
}

/* headings used --pine/--ink as text -> go light in dark (accent spans keep their own color) */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3{color:var(--cream)}

/* pine-as-text elements that aren't headings */
:root[data-theme="dark"] .ccard .cn,
:root[data-theme="dark"] .signup__label,
:root[data-theme="dark"] .trust__foot b,
:root[data-theme="dark"] .reports b,
:root[data-theme="dark"] .pull,
:root[data-theme="dark"] .filters .f.act{color:var(--cream)}

/* buttons / links that must stay readable on dark */
:root[data-theme="dark"] .cta.ghost{color:var(--cream);border-color:var(--pine-fog)}
:root[data-theme="dark"] .maplink,
:root[data-theme="dark"] .about__sig a{color:#8fb8cf}
:root[data-theme="dark"] .art__body strong{color:var(--pine-fog)}

/* theme toggle (lives in the pine nav) */
.theme-toggle{background:none;border:1px solid rgba(233,226,208,.32);color:var(--cream,#F2ECDD);
  width:34px;height:34px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;flex:none;padding:0;margin-left:14px}
.theme-toggle:hover{border-color:var(--cream,#F2ECDD)}
.theme-toggle:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:inline-block}

/* site-wide keyboard focus (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--magenta,#C2306B);outline-offset:2px}