/* ============================================================
   A Wood of One's Own — shared theme
   Single source of truth for palette + light/dark mode.
   Every page references this file (the Worker injects the <link>
   automatically; new pages should include it explicitly):
       <link rel="stylesheet" href="/theme.css">
   The toggle + persistence live in /theme.js.
   ============================================================ */

/* ---- Light palette (canonical, matches the field guide) ---- */
:root{
  --paper:#f7f5ef; --paper-warm:#efeadd; --card:#fdfcf9;
  --ink:#1d2521; --ink-soft:#5b675f; --rule:#e0dacb; --rule-strong:#c9c0aa;
  --forest:#2e5d43; --forest-deep:#1e4231; --leaf:#6a7f4f; --water:#33667a;
  --gorge:#a8472e; --accent:#9c5532; --gold:#b18a33; --oak:#73643f; --fungus:#8a5a2b;
  --chip:#eef2ea; --flag:#a8472e; --danger:#a23b28;
  --shadow:0 10px 30px -18px rgba(35,45,38,.35);
  --shadow-lg:0 24px 60px -30px rgba(35,45,38,.45);
  --r:12px; --r-sm:8px;
}

/* ---- Dark palette ---- */
[data-theme="dark"]{
  --paper:#11161a; --paper-warm:#0d1114; --card:#1a2126;
  --ink:#e6e2d6; --ink-soft:#9faaa1; --rule:#2c343a; --rule-strong:#3b454c;
  --forest:#7cb795; --forest-deep:#a4d3b6; --leaf:#a9bd7e; --water:#7db4c5;
  --gorge:#e08a6d; --accent:#d9a070; --gold:#d3b066; --oak:#b3a37a; --fungus:#cfa06a;
  --chip:#222b27; --flag:#e08a6d; --danger:#e08a6d;
  --shadow:0 10px 30px -18px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -30px rgba(0,0,0,.7);
}

/* ---- Follow the OS setting when the reader hasn't chosen ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --paper:#11161a; --paper-warm:#0d1114; --card:#1a2126;
    --ink:#e6e2d6; --ink-soft:#9faaa1; --rule:#2c343a; --rule-strong:#3b454c;
    --forest:#7cb795; --forest-deep:#a4d3b6; --leaf:#a9bd7e; --water:#7db4c5;
    --gorge:#e08a6d; --accent:#d9a070; --gold:#d3b066; --oak:#b3a37a; --fungus:#cfa06a;
    --chip:#222b27; --flag:#e08a6d; --danger:#e08a6d;
    --shadow:0 10px 30px -18px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -30px rgba(0,0,0,.7);
  }
}

html,body{ background:var(--paper); color:var(--ink); }

/* ---- Dark-mode polish for shared components (masthead, forms, panels) ---- */
[data-theme="dark"] .masthead{ background:#16241c !important; }
[data-theme="dark"] .masthead h1{ color:#f0ece0 !important; }
[data-theme="dark"] .masthead .sub{ color:#c7d3c9 !important; }
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background:#1e262b !important; color:var(--ink) !important; border-color:var(--rule) !important;
}
[data-theme="dark"] .addcard{ background:var(--card) !important; }
[data-theme="dark"] .danger-zone,
[data-theme="dark"] .gate{ background:#2a1d1a !important; border-color:#5a3a30 !important; }

/* ---- The injected toggle button (theme.js) ---- */
#wg-theme-toggle{
  position:fixed; left:16px; bottom:16px; z-index:9998;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--rule-strong); background:var(--card); color:var(--ink);
  font-size:19px; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .2s, color .2s;
}
#wg-theme-toggle:hover{ transform:scale(1.08); }