/* ===========================================================================
   BRAND TOKENS — the only file you edit to change the colours.
   Shared by every page in site/ (index.html, privacy.html, terms.html), which
   is why it is a file rather than an inline block: three copies of a palette
   is exactly the thing site.css was written to avoid. site.css contains no hex
   value anywhere; every colour in the site comes from here.
   See docs/site.md §§2-3. The other half of the brand config, the name and the
   addresses, is still the window.BRAND block at the top of index.html.
   =========================================================================== */

:root{
  /* ── wordmark ─────────────────────────────────────────────────────────── */
  --brand-mark-size: 1.05em;          /* the registration mark beside the name */
  --brand-wordmark-tracking: -0.012em;

  /* ── light palette ────────────────────────────────────────────────────── */
  --paper:        #f1f3f0;   /* page ground                                   */
  --paper-raised: #fafbf9;   /* panels, tables, the document surfaces         */
  --paper-sunk:   #e8ebe7;   /* the quietest fill                             */
  --ink:          #131816;   /* body text                                     */
  --ink-soft:     #4c5854;   /* secondary text                                */
  --ink-faint:    #6f7d78;   /* captions, metadata                            */
  --rule:         #d3dbd6;   /* hairlines                                     */
  --accent:       #1d5a4c;   /* the one saturated colour                      */
  --accent-hover: #123f34;
  --accent-wash:  #e2ece7;   /* accent at 8%                                  */
  --on-accent:    #fafbf9;   /* text on an accent fill                        */
  --flag:         #8f5410;   /* "we could not check this / not decided yet"   */
  --flag-wash:    #f5eade;
  --redact:       #131816;   /* the blacked-out bar                           */
  --focus:        #1d5a4c;
}

/* ── dark palette ───────────────────────────────────────────────────────
   Same token names, redefined twice: once for an OS set to dark (unless the
   viewer has explicitly chosen light), once for an explicit dark choice. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:        #0f1412;
    --paper-raised: #161d1a;
    --paper-sunk:   #1c2420;
    --ink:          #e7ece8;
    --ink-soft:     #a4b0aa;
    --ink-faint:    #7f8c87;
    --rule:         #29332e;
    --accent:       #6fc3a6;
    --accent-hover: #93d8c0;
    --accent-wash:  #15271f;
    --on-accent:    #0f1412;
    --flag:         #d9a05b;
    --flag-wash:    #271d10;
    --redact:       #c7d1cc;
    --focus:        #93d8c0;
  }
}
:root[data-theme="dark"]{
  --paper:        #0f1412;
  --paper-raised: #161d1a;
  --paper-sunk:   #1c2420;
  --ink:          #e7ece8;
  --ink-soft:     #a4b0aa;
  --ink-faint:    #7f8c87;
  --rule:         #29332e;
  --accent:       #6fc3a6;
  --accent-hover: #93d8c0;
  --accent-wash:  #15271f;
  --on-accent:    #0f1412;
  --flag:         #d9a05b;
  --flag-wash:    #271d10;
  --redact:       #c7d1cc;
  --focus:        #93d8c0;
}