/* ============================================================================
   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.

   This is the TEMPLATE default theme: the real **oomny** brand — the sky-blue
   cloud-and-person identity (#3aa7df) on clean cool neutrals. scaffold.sh
   leaves this file for a new app to re-skin from its own docs/brand.md palette.

   Brand: oomny blue #3aa7df. Because the fill blue is only ~2.7:1 on white, the
   contract's --accent-text escape hatch carries a darkened blue tuned to AA
   (≥4.5:1) for links + small text; the bright blue stays for fills, the cloud
   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:#f5f7f9; --bg-2:#e9eef2; --surface:#ffffff;
  --text:#14191d; --text-soft:#586670;
  --accent:#3aa7df; --accent-2:#5bb8e8; --accent-ink:#ffffff;
  --accent-text:#0e6f9e;                 /* darkened oomny blue, AA ≈5.2:1 on --bg / 5.5:1 on white */
  --line:#dde4e9;
  --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 cool palette, faint blue atmosphere) ---- */
[data-theme="dark"] {
  --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
  --text:#eaf1f6; --text-soft:#94a5b0;
  --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
  --accent-text:#6cc3ef;                 /* AA ≈8.5:1 on --bg */
  --line:#23323f;
  --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#1c2935;
  --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:#0b1117; --bg-2:#111a22; --surface:#16212b;
    --text:#eaf1f6; --text-soft:#94a5b0;
    --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
    --accent-text:#6cc3ef;
    --line:#23323f;
    --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#1c2935;
    --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}
}