/* ============================================================================
   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 face, hero tint, chips).
   Light + dark from the brand-doc palette columns.

   Re-skinned from the Duelword brand (was the template default oomny blue). The
   warm-ivory canvas, indigo accent and SANS display mirror the app's SwiftUI
   colorsets (AccentColor #4F46E5 / Paper #FAF9F5 / Ink #141413), the upstream
   source of truth — see the [brand_visual] accent in apps/duelword/app.toml and
   apps/duelword/ios/Resources/Assets.xcassets/AccentColor.colorset.

   Brand: indigo #4F46E5 — the head-to-head word-duel mark (two facing letter
   tiles). The indigo is ~6:1 on the #faf9f5 ivory, so it carries both fills AND
   links/small text directly (no separate darkened escape hatch needed). A duel
   game is direct and game-y, not editorial, so the display face is the system
   SANS (matches the in-app SF face), unlike the serif editorial siblings.
   ============================================================================ */

/* Sans display for headings — Duelword is a game, direct not editorial. */
:root { --display: var(--sans); }

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#faf9f5; --bg-2:#ecebe8; --surface:#fffdf8;
  --text:#141413; --text-soft:#615c6e;
  --accent:#4f46e5; --accent-2:#6056ea; --accent-ink:#ffffff;
  --accent-text:#4338ca;                 /* indigo, AA ≈7.5:1 on --bg / 7.9:1 on white */
  --line:#e3e0ec;
  --verified:#4f7d62; --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 indigo-tinted palette) ---- */
[data-theme="dark"] {
  --bg:#19171f; --bg-2:#211e2a; --surface:#23202d;
  --text:#ece8f2; --text-soft:#928da0;
  --accent:#8d85f5; --accent-2:#9a93f7; --accent-ink:#19171f;
  --accent-text:#8d85f5;                 /* AA ≈5.8:1 on --bg */
  --line:#322e3c;
  --verified:#8fc9a8; --caution:#d9b36a; --caution-text:#d9b36a;
  --chip-bg:#2a2636;
  --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:#19171f; --bg-2:#211e2a; --surface:#23202d;
    --text:#ece8f2; --text-soft:#928da0;
    --accent:#8d85f5; --accent-2:#9a93f7; --accent-ink:#19171f;
    --accent-text:#8d85f5;
    --line:#322e3c;
    --verified:#8fc9a8; --caution:#d9b36a; --caution-text:#d9b36a;
    --chip-bg:#2a2636;
    --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}
}