/* =====================================================================
   theme.css – colours and fonts of the Four Calendars page
   ---------------------------------------------------------------------
   The original file had five themes; only "Sage" was in use, so only
   it is kept here (it is built on top of the "Almanac Paper" rules).
   To try other colours, change the values in Part 2.
   ===================================================================== */

/* Numbers in headings line up evenly */
h2,h3,.yr,.brand h1{font-variant-numeric:lining-nums}
html[data-theme^=paper]{--moonhd:#3a352e}
html[data-theme^=paper] .c.zero .n,html[data-theme^=paper] .c.nm .n,html[data-theme^=paper] .c.dark .n{color:#f3eee4!important}
/* ---------- Part 1 · "Almanac Paper": light page, printed-almanac feel ----------
   Fonts: EB Garamond for headings, Inter for text, IBM Plex Mono for small numbers.
   The rules start with html[data-theme^=paper], which means "any theme whose
   name starts with paper" – so they also apply to paper-sage below.            */
html[data-theme^=paper]{--fd:"EB Garamond",Georgia,"Times New Roman",serif;--fu:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fm:"IBM Plex Mono",monospace;--cellr:4px;
  --bg2:#f6f1e7;--line:#e4dccd;--line2:#d2c6b1;--ink:#211c15;--mute:#6f6656;--dim:#9a907d;--wkend:#5b5346;--onacc:#fffdf8;--warn:#a5601b;--ring:rgba(33,28,21,.55);--selglow:rgba(33,28,21,.14);--sel:#211c15;
  --moondark:#3a352e;--moonedge:rgba(0,0,0,.25);--greg:#2d5c9a;--lunar:#9a6a12;--tn:#6a4aa0;--doy:#3f7565;--fire:#c4553a;--earth:#5f8a3d;--air:#a48c13;--water:#2f7fae}
html[data-theme^=paper] body[data-view=standard]{--accent:#2d5c9a;--bg:#efe9dd;--card:#fffdf8;--frame:#d9cfbd}
html[data-theme^=paper] body[data-view=lunar]{--accent:#9a6a12;--bg:#f1e8d6;--card:#fffcf4;--frame:#dccbaa}
html[data-theme^=paper] body[data-view=true-number]{--accent:#6a4aa0;--bg:#ece7f0;--card:#fdfbff;--frame:#d5cbe2}
html[data-theme^=paper] body[data-view=zodiac]{--accent:#2b7f72;--bg:#e6eee9;--card:#fbfefc;--frame:#c7d9d0}
html[data-theme^=paper] body{background:var(--bg)}
html[data-theme^=paper] header.top{background:color-mix(in srgb,var(--bg) 94%,transparent)!important;border-bottom:1px solid var(--accent)!important;box-shadow:0 3px 0 -1px color-mix(in srgb,var(--accent) 25%,transparent)}
html[data-theme^=paper] .card{box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px rgba(60,45,20,.07);padding:16px!important}
html[data-theme^=paper] .c{border:1px solid #e9e1d2}
html[data-theme^=paper] .c:hover{border-color:var(--line2)}
html[data-theme^=paper] .c.dark,html[data-theme^=paper] .c.nm,html[data-theme^=paper] .c.zero{color:#f3eee4}
html[data-theme^=paper] .c.zero .g,html[data-theme^=paper] .c.nm .g{color:#b9b09f}
html[data-theme^=paper] .c.zero .doy,html[data-theme^=paper] .c.nm .doy{color:#9fd0bf}
html[data-theme^=paper] .card h3{font-size:21px;font-weight:600}
html[data-theme^=paper] .brand h1{font-size:28px;font-weight:600}
html[data-theme^=paper] .viewhead h2{font-size:34px;font-style:italic}
html[data-theme^=paper] .panel h2{font-size:30px}
html[data-theme^=paper] .wk div{color:var(--mute);letter-spacing:.16em}
html[data-theme^=paper] .seg,html[data-theme^=paper] .ibtn,html[data-theme^=paper] .chip,html[data-theme^=paper] .jump button{background:#fffdf8}
html[data-theme^=paper] .seg button[aria-pressed=true]{background:var(--accent);color:#fffdf8}
html[data-theme^=paper] .chip[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 12%,#fffdf8)}
html[data-theme^=paper] .card h3 .msw{box-shadow:0 0 0 1px rgba(0,0,0,.25)}
html[data-theme^=paper] .legend .dot{box-shadow:0 0 0 1px rgba(0,0,0,.25)}



/* ---------- Part 2 · "Sage": the colours actually used ----------
   Pastel green page, plum day boxes. index.html sets data-theme="paper-sage".
   --bg2 is the colour of the day boxes, --bg the page, --card the cards.
   Each view's accent colour is set in the four body[data-view=...] lines.      */
html[data-theme^=paper-sage]{--moonedge:rgba(255,255,255,.16);--doy:#cfe8d6;--ink:#1e2a22;--mute:#5f6e62;--dim:#8d9a8f;--line:#d5e2cf;--line2:#bfd0b8;
  --greg:#33698a;--lunar:#9a6a1f;--tn:#7a4f8a;--doy-ink:#3f7d5c;--sel:#1e2a22;--ring:rgba(255,255,255,.8);--selglow:rgba(30,42,34,.25);--moonhd:#1e2a22;--warn:#9a5a1f}
html[data-theme=paper-sage]{--bg2:#5d3f59;--moondark:#3c2838;--wkend:#f1e3ed}
html[data-theme^=paper-sage]{background:#dfeadb}   /* page colour also below the content (no dark strip at the bottom on phones) */
html[data-theme^=paper-sage] body[data-view=standard]{--accent:#33698a;--bg:#dfeadb;--card:#eef5ea;--frame:#c6d7bf}
html[data-theme^=paper-sage] body[data-view=lunar]{--accent:#9a6a1f;--bg:#dfeadb;--card:#eef5ea;--frame:#c6d7bf}
html[data-theme^=paper-sage] body[data-view=true-number]{--accent:#7a4f8a;--bg:#dfeadb;--card:#eef5ea;--frame:#c6d7bf}
html[data-theme^=paper-sage] body[data-view=zodiac]{--accent:#3f7d5c;--bg:#dfeadb;--card:#eef5ea;--frame:#c6d7bf}
html[data-theme^=paper-sage] .c{border-color:transparent;color:#f8f1f6}
html[data-theme^=paper-sage] .c .g{color:rgba(255,255,255,.68)}
html[data-theme^=paper-sage] .c .tint{display:none}
html[data-theme^=paper-sage] .c.zero{background:#2f4f40!important;border:1px solid #2f4f40}
html[data-theme^=paper-sage] .c.zero .g{color:#b9d3c3}
html[data-theme^=paper-sage] .c.nm{background:var(--bg2);box-shadow:inset 0 0 0 2px #d9a93c}
html[data-theme^=paper-sage] .c.sel{border-color:#1e2a22;box-shadow:0 0 0 2px #1e2a22}
html[data-theme^=paper-sage] .c.wkend .n{color:var(--wkend)}
html[data-theme^=paper-sage] .c .ev{color:#f1cf7a}
html[data-theme^=paper-sage] .darkrow .dl{color:#2f4f40;opacity:1}