/* HeroscapeKnights heraldry: the shared base for every HK site.
   Load this first, then exactly one theme from themes/. The theme sets the palette and type;
   this file switches light and dark and fills in the tokens a theme may leave out. */

/* Light and dark. Theme colors are light-dark() pairs, so the mode only sets color-scheme.
   With no data-theme the system preference wins; a toggle sets data-theme="light" or "dark". */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Defaults a theme may override. Each is derived from the theme's palette. */
:root {
  --page-bg: var(--bg);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --topbar-filter: saturate(1.4) blur(12px);
  --topbar-ink: var(--text);
  --topbar-dim: var(--text-dim);
  --topbar-accent: var(--accent);
  --topbar-line: var(--line);
  --tabs-bg: var(--bg-sunken);
  --tabs-line: var(--line);
  --tab-active-bg: var(--bg-raised);
  --tab-active-ink: var(--text);
  --thead-bg: var(--bg-sunken);
  --thead-ink: var(--text-dim);
  --thead-accent: var(--accent);
  --heading-ink: var(--text);
  --ability-ink: var(--accent);
  --mark-fill: var(--accent);
  --mark-ink: var(--accent-ink);
  --stat-ink: #fff;
  --content-width: 1200px; /* each site sets its own; themes that frame the page use it */

  --display-weight: 700;
  --display-case: uppercase;
  --display-tracking: .02em;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --radius-pill: 999px;
}

/* The HK mark: a hex with the H and K sharing a stem. Inline the SVG from mark/hk-mark.svg
   with class="hk-mark" so it takes the theme's colors. */
.hk-mark { flex: none; }
.hk-mark .hk-hex { fill: var(--mark-fill); }
.hk-mark .hk-ring { fill: none; stroke: var(--mark-ink); stroke-width: 2.5; }
.hk-mark .hk-letters { fill: var(--mark-ink); }