/*
═══════════════════════════════════════════════════════════════════════════════
  assets/css/theme.css  .  Light and dark themes (shared colour tokens)
═══════════════════════════════════════════════════════════════════════════════

  WHAT IT IS
    Every page keeps its own :root block with the Guild's ten colours
    (--parchment, --ink, --forest, --gold, ...). This file adds a few
    shared "role" tokens and, under html[data-theme="dark"], gives the
    PAPER colours a warm wood-brown dark version (Wolf, 2026-10-02:
    parchment and cream are the eye-hurters; one dark mode, warm brown,
    not grey). html[data-theme="dark"] outranks :root, so load order
    does not matter.

  WHAT FLIPS AND WHAT STAYS
    Flips (paper):  --cream (page), --parchment-bg (sections), --card
                    (cards and fields), --parchment-dk (rules), --ink,
                    --ink-soft, --ink-softer (body text), --stone (muted text), --forest-text
                    (headings on paper), --gold-text (small gold text on
                    paper), --rust, --ok, --danger, --error-bg, --link.
    Stays (chrome): --forest, --forest-lt, --gold, --gold-lt, --parchment
                    (light text on green), so green navs, green pages,
                    gold buttons and the language pill look the same in
                    both themes.

  ROLE TOKENS (use these, not the raw colour, for these jobs)
    --forest-text   heading/accent TEXT on paper. var(--forest) stays for
                    green surfaces and for text ON gold.
    --gold-text     small gold TEXT on paper (raw --gold is 2.7:1 there).
    --parchment-bg  a parchment-coloured SECTION background.
    --card          white cards, panels and input fields.
    --field-border  input and select edges (3:1 or more in both themes).
    --focus         keyboard focus outline (3:1 on paper and on green).
    --ok / --danger / --error-bg / --link   status colours.
    --crisis-bg     the crisis banner fill (same in both themes).

  GREEN PAGES
    Pages whose whole body is forest green (sign-in, join, donate, reset,
    claim, Representative sign-in/up/oath, welcome) put class
    "surface-forest" on <body>. That re-points the muted, hint, error and
    small-gold text tokens to light versions that read on green (they
    used the parchment versions before: 1.8 to 3.6:1).

  CONTRAST (WCAG 2.x, measured with the site's real colours)
    Dark: body text 12-14:1, muted 7-8.5:1, headings 8-9.5:1, small gold
    7-8:1, errors 6-7:1, field edges 3.7-4.3:1.
    Light fixes: small gold text 4.9:1+, green-page muted text 4.8:1+.
    Pages were measured in a browser in both themes; what that covered and
    what it did not is recorded in lab/reviews/THEME.md.

  COMPANIONS
    assets/js/theme.js   sets data-theme before paint; the sun/crescent button
    offline.html         carries its own copy (it must work with nothing else)
═══════════════════════════════════════════════════════════════════════════════
*/

:root {
  color-scheme: light;
  --forest-text:  #1a2e1a;
  --ink-soft:     #3a2e1a;   /* secondary body copy, as before the theme */
  --ink-softer:   #4a3e2a;
  --gold-text:    #7d5f1c;
  --parchment-bg: #f4e8ce;
  --card:         #ffffff;
  --field-border: #8f7a5c;
  --focus:        #9a7a2a;
  --ok:           #2e6b1e;
  --danger:       #b83528;   /* the old #c0392b, a shade deeper: 4.5:1 on parchment too */
  --error-bg:     #fdecea;
  --link:         #7a5a16;
  --crisis-bg:    #7a3b1e;
  --rust:         #7a3b1e;
  --shadow:       rgba(26, 46, 26, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* paper */
  --cream:        #1c1610;
  --parchment-bg: #2c2319;
  --card:         #261e16;
  --parchment-dk: #4a3e2d;
  --ink:          #ede4d0;
  --ink-soft:     #e3d8c2;
  --ink-softer:   #d9cdb4;
  --stone:        #c2b194;
  --forest-text:  #a8c69a;
  --gold-text:    #d4aa55;
  --field-border: #8a7a60;
  --focus:        #d4aa55;
  --rust:         #e39a74;
  --ok:           #8cc98a;
  --danger:       #f08a7e;
  --error-bg:     #3b1f15;
  --link:         #d4aa55;
  --shadow:       rgba(0, 0, 0, 0.45);
}

/* Green pages and green islands: light text roles for a green surface, in
   both themes. Used on <body> of the green pages and on green panels inside
   paper pages (for example the home page's join panel). */
.surface-forest {
  --stone:     #cdbd9f;
  --stone-lt:  #d6c8ab;
  --danger:    #f2b0a8;
  --gold-text: #e0bd6e;
  --focus:     #d4aa55;
  --link:      #e0bd6e;
}

/* Paper islands inside green pages (the rep-oath scroll): the paper text
   roles again, so the green page's light versions do not reach paper. */
.surface-paper {
  --stone:     #79654b;
  --gold-text: #7d5f1c;
  --danger:    #b83528;
  --focus:     #9a7a2a;
  --link:      #7a5a16;
}
html[data-theme="dark"] .surface-paper {
  --stone:     #c2b194;
  --gold-text: #d4aa55;
  --danger:    #f08a7e;
  --focus:     #d4aa55;
  --link:      #d4aa55;
}

/* Some translated strings carry their own <a style="color:var(--gold)">
   (db/seed-i18n.js and the language packs). Editing those strings would
   withdraw every reviewed translation of them, so the colour is corrected
   here instead: --gold-text is dark gold on paper and light gold on green. */
a[style*="color:var(--gold)"] { color: var(--gold-text) !important; }

/* Placeholders follow the muted text role instead of the browser grey. */
::placeholder { color: var(--stone); opacity: 1; }

/* Shared event/calendar filters: the labels remain visible after typing, and
   controls have a generous touch target without forcing horizontal scrolling.
   Keep this shared: both pages instantiate the same event-filters.js form. */
.event-filter-form label { display: flex; flex-direction: column; gap: .3rem; min-width: 0; max-width: 100%; }
.event-filter-form input:not([type="checkbox"]),
.event-filter-form select, .event-filter-form button {
  box-sizing: border-box; min-height: 44px; max-width: 100%;
  padding: .55rem .7rem; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--field-border); border-radius: 3px;
}
.event-filter-form input[type="checkbox"] { width: 24px; height: 24px; }
.event-filter-form button { cursor: pointer; }
.event-filter-form :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) {
  .event-filter-form label, .event-filter-form button { width: 100%; }
}

/* Respect the device's motion preference across pages. These effects convey
   no state; keep their end events available while removing visible motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* The crisis block keeps its fill in dark mode; a rust edge separates it
   from the dark page (2.2:1 without it). */
html[data-theme="dark"] .crisis-banner,
html[data-theme="dark"] [data-crisis] { outline: 1px solid var(--rust); }

/* Banners at the very top of a page keep clear of the floating language pill
   and theme button in the top-left corner, as the navs do (i18n.js reserves
   16.75rem there). The crisis line on /help/reach-out must never be covered. */
@media (min-width: 721px) {
  body > .crisis-banner,
  body > .notice-bar { padding-left: 17.5rem !important; }
}
/* Wide screens: the home page notice bar stays centred (its own padding is symmetric). */
@media (min-width: 1101px) {
  body > .notice-bar { padding-right: 17.5rem !important; }
}

/* ── The sun/crescent button (assets/js/theme.js) ─────────────────────────
   Same look as the language pill beside it: gold fill, forest edge and
   icon, the same lift; hover inverts like every Guild control. */
.guild-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; padding: 0; flex: 0 0 auto;
  background: #b8923a; color: #1a2e1a;
  border: 1.5px solid rgba(26, 46, 26, 0.85); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.guild-theme-btn:hover { background: #1a2e1a; color: #d4aa55; border-color: #d4aa55; }
/* i18n.js gives focused buttons 2px corners; this one stays round. */
.guild-theme-btn:focus-visible { border-radius: 999px; }
.guild-theme-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
/* Beside the language pill: one row, the pill's menu still opens under the pill. */
#guild-floating-lang.has-theme-btn { display: flex; align-items: flex-start; gap: 0.4rem; }
#guild-floating-lang.has-theme-btn #guild-floating-lang-menu { left: calc(2.3rem + 0.4rem); }
/* Right-to-left pages reverse the row: the pill comes first, so its menu sits at the left edge. */
body[dir="rtl"] #guild-floating-lang.has-theme-btn #guild-floating-lang-menu { left: 0; }
/* Pages without the language pill (help-closed) get the button on its own. */
#guild-theme-float { position: fixed; top: 1rem; left: 1rem; z-index: 200; }
body:has(.mobile-menu.open) #guild-theme-float { display: none !important; }
@media (max-width: 720px) {
  #guild-theme-float { top: auto; bottom: 0.7rem; left: 0.7rem; }
  .guild-theme-btn { width: 2.1rem; height: 2.1rem; }
  #guild-floating-lang.has-theme-btn #guild-floating-lang-menu { left: calc(2.1rem + 0.4rem); }
}
@media print { .guild-theme-btn, #guild-theme-float { display: none !important; } }