/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display serif, --radius, hero
   texture, chip style). Light + dark from the brand-doc palette columns.

   Cardpile: warm Paper canvas, amber "recall" accent, SANS display (utility app,
   not editorial — no serif --display). Mirrors the app's AccentColor.colorset
   (light #B8791F, dark #E0A845) and Paper canvas (light #FAF9F5, dark #1A1614).

   The amber fill #B8791F is only ~3.4:1 on the ivory --bg, so the contract's
   --accent-text escape hatch carries a darkened amber tuned to AA (≥4.5:1) for
   links + small text; the bright amber stays for fills, the brand mark and large
   accents. Accent-tinted surfaces use color-mix(var(--accent)) so re-hueing
   cascades to the halo + chips automatically.
   ============================================================================ */

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#faf9f5; --bg-2:#f1ece2; --surface:#fffefb;
  --text:#141413; --text-soft:#6b6256;
  --accent:#b8791f; --accent-2:#cc8f33; --accent-ink:#fffaf2;
  --accent-text:#8a5a12;                 /* darkened amber, AA ≈5.6:1 on --bg / 5.9:1 on white */
  --line:#e6ddcf;
  --verified:#2f8f5e; --caution:#b07d22; --caution-text:#8a6014;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}

/* ---- dark (deep warm palette, faint amber atmosphere) ---- */
[data-theme="dark"] {
  --bg:#1a1614; --bg-2:#221c19; --surface:#28211c;
  --text:#efe9e0; --text-soft:#a99e8f;
  --accent:#e0a845; --accent-2:#e8b85f; --accent-ink:#1f1710;
  --accent-text:#e8b85f;                 /* AA ≈9:1 on --bg */
  --line:#352c24;
  --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#2a221b;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#1a1614; --bg-2:#221c19; --surface:#28211c;
    --text:#efe9e0; --text-soft:#a99e8f;
    --accent:#e0a845; --accent-2:#e8b85f; --accent-ink:#1f1710;
    --accent-text:#e8b85f;
    --line:#352c24;
    --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#2a221b;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  }
}

/* ---- brand wordmark: the real OOMNY letterforms as a themeable mask -----------
   Brand-specific asset → lives in this per-app file, never shared site.css (C3/C4).
   Rendered as a mask so the colour follows --text and adapts to light/dark; pair it
   with the cloud tile icon (oomny-icon.png). Aspect ratio of the artwork ≈ 4.869. */
.wordmark{display:inline-flex;align-items:center;flex:0 0 auto}
.wordmark img{display:block;width:auto}
.brand .wordmark img{height:18px}
.foot-brand .wordmark img{height:15px}
.wordmark .wm-on-dark{display:none}
[data-theme="dark"] .wordmark .wm-on-light{display:none}
[data-theme="dark"] .wordmark .wm-on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .wordmark .wm-on-light{display:none}
  :root:not([data-theme]) .wordmark .wm-on-dark{display:block}
}