/* themes/dark.css — a dark layer, toggled with [data-dark="on"] on .hoa-page, the same way
   high-contrast works. It sits on top of whichever theme is chosen rather than being a theme of
   its own, so Coastal dark and Civic dark are the same switch.

   One accent for all of them. A theme's own primary cannot be lightened from inside this file,
   because referring to --hoa-color-primary while redefining it is a cycle and CSS drops it. Gold
   reads well on every one of these grounds and is already the house accent. */
.hoa-page[data-dark="on"]{
  --hoa-color-bg:#11161F; --hoa-color-surface:#18202C;
  --hoa-color-ink:#E8ECF2; --hoa-color-ink-muted:#A3AFC0;
  --hoa-color-primary:#C8A24A; --hoa-color-primary-deep:#E0BC68; --hoa-color-primary-tint:#222C3A; --hoa-color-on-primary:#11161F;
  --hoa-color-rule:#2C3745;
  --hoa-color-success:#5FBF8B; --hoa-color-success-tint:#16281F;
  --hoa-color-warning:#E3B341; --hoa-color-warning-tint:#2A2316;
  --hoa-color-danger:#F08A8A; --hoa-color-danger-tint:#2C1A1A;
  --hoa-color-focus:#C8A24A;
  --hoa-hero-bg:#0C1118; --hoa-hero-ink:#F2F5F9; --hoa-hero-muted:#AFBACB;
  --hoa-hero-btn-bg:#C8A24A; --hoa-hero-btn-ink:#11161F;
  /* The bar and footer have their own variables; without these they keep the light theme's gold
     and navy and sit oddly against a dark page. */
  --hoa-bar-bg:#1A2230; --hoa-bar-rule:1px solid #2C3745;
  --hoa-footer-bg:#0C1118; --hoa-footer-ink:#D7DEE8;
  --hoa-page-tint:#11161F; --hoa-panel-bg:#18202C; --hoa-gold:#C8A24A; --hoa-gold-hover:#E0BC68;
  --hoa-rule:1px solid #2C3745; --hoa-rule-strong:2px solid #C8A24A; --hoa-card-border:1px solid #2C3745;
  color-scheme: dark;
}
/* The page behind the body (below a short page) and gold buttons in the header. */
html:has(.hoa-page[data-dark="on"]){ background:#11161F; }
.hoa-page[data-dark="on"] .hoa-header a.hoa-btn-primary,
.hoa-page[data-dark="on"] .hoa-header a.hoa-btn-primary:hover{ color:#11161F; }

/* Themes paint the header from their own primary (lakefront does exactly that), and the accent
   here is gold, which produced gold text on a gold header. Paint it explicitly instead. */
.hoa-page[data-dark="on"] .hoa-header,
.hoa-page[data-dark="on"] .hoa-header[data-area]{
  background:#0E131B; color:#E8ECF2; border-bottom:1px solid #2C3745;
}
.hoa-page[data-dark="on"] .hoa-header .hoa-brand-name,
.hoa-page[data-dark="on"] .hoa-header .hoa-nav-link,
.hoa-page[data-dark="on"] .hoa-header .hoa-nav-toggle{ color:#E8ECF2; }
.hoa-page[data-dark="on"] .hoa-header .hoa-brand-sub{ color:#A3AFC0; }
.hoa-page[data-dark="on"] .hoa-bar{ color:#E8ECF2; }

/* Surfaces that themes paint white directly rather than through a variable. */
.hoa-page[data-dark="on"] .hoa-card,
.hoa-page[data-dark="on"] .hoa-notice,
.hoa-page[data-dark="on"] .hoa-next-meeting,
.hoa-page[data-dark="on"] .hoa-doc,
.hoa-page[data-dark="on"] .hoa-empty,
.hoa-page[data-dark="on"] .hoa-pick-thumb,
.hoa-page[data-dark="on"] .hoa-contact-block{
  background:var(--hoa-color-surface); border-color:var(--hoa-color-rule);
}

/* Form controls keep their own colours in most browsers unless told otherwise. */
.hoa-page[data-dark="on"] .hoa-input,
.hoa-page[data-dark="on"] select,
.hoa-page[data-dark="on"] textarea{
  background:#0F141C; color:var(--hoa-color-ink); border-color:var(--hoa-color-rule);
}

/* Photographs are the one thing that should not be dimmed. */
.hoa-page[data-dark="on"] img{ filter:none; }
/* Small gold labels (PDF) need dark text on gold. */
.hoa-page[data-dark="on"] .hoa-doc-pdf,
.hoa-page[data-dark="on"] .hoa-notice-date{ color:#11161F; }