/* T3: T3 Code's default look. Zinc greys and white with a blue primary in light mode, true black in dark,
   system sans (Inter where there's no San Francisco), 8px corners and no ornament. Follows the device setting.
   Lives outside site/heraldry/ because sync_heraldry.py keeps that folder an exact copy of heraldry. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap");

:root {
  /* light-dark(light, dark); values are T3 Code's tokens (Tailwind zinc and neutral). */
  --bg: light-dark(oklch(99.2% 0 0), #000);
  --bg-raised: light-dark(#fff, #111);
  --bg-sunken: light-dark(#f4f4f5, #0a0a0a);
  --row-alt: light-dark(#fafafa, #151515);
  --row-hover: light-dark(#f4f4f5, #1c1c1c);
  --row-selected: light-dark(oklch(95% .03 264), oklch(26% .07 264));
  --line: light-dark(#e4e4e7, rgb(255 255 255 / .08));
  --line-strong: light-dark(#d4d4d8, rgb(255 255 255 / .14));
  --text: light-dark(#18181b, #f5f5f5);
  --text-dim: light-dark(#52525b, #a3a3a3);
  --text-faint: light-dark(#71717a, #8a8a8a);
  --accent: light-dark(oklch(48.8% .217 264), oklch(57.1% .21 264));
  --accent-ink: #fff;
  --link: light-dark(oklch(48.8% .217 264), oklch(70.7% .165 254.6));
  --best: light-dark(oklch(94% .04 264), oklch(28% .08 264));
  --new: light-dark(#047857, #34d399);
  --new-ink: light-dark(#fff, #022c22);
  --preorder: light-dark(#6d28d9, #a78bfa);
  --preorder-ink: light-dark(#fff, #1e1033);
  --bonus: light-dark(#b45309, #fbbf24);
  --bonus-ink: light-dark(#fff, #1f1300);
  --soldout: light-dark(#71717a, #8a8a8a);
  --soldout-ink: light-dark(#fff, #000);

  --life: #dc2626;
  --move: #15803d;
  --range: #52525b;
  --attack: #be123c;
  --defense: #2563eb;

  --topbar-filter: saturate(1.2) blur(12px);
  --tabs-bg: transparent;
  --tabs-line: transparent;
  --tab-active-bg: light-dark(#f4f4f5, rgb(255 255 255 / .08));
  --topbar-accent: var(--text-dim);
  --thead-bg: light-dark(#fafafa, #181818);
  --thead-accent: var(--link);
  --mark-fill: var(--text);
  --mark-ink: var(--bg);

  --shadow: 0 1px 2px light-dark(rgb(0 0 0 / .05), rgb(0 0 0 / .5)), 0 6px 20px light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .5));
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --display-weight: 600;
  --display-case: none;
  --display-tracking: -.015em;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter Variable", Inter, "Segoe UI", system-ui, sans-serif;
  --font-body: var(--font-display);
}

/* Flat tabs: the current view is a grey fill, not a raised pill. */
.tabs a[aria-current="page"] { box-shadow: none; }
.tabs a:hover { color: var(--topbar-ink); }
.btn:hover { filter: none; background: color-mix(in srgb, var(--accent) 90%, var(--bg)); }
.btn.ghost:hover { background: var(--row-hover); }

/* Whole-card links read as text; the blue is kept for real links. */
.fcard, .highlight { color: var(--text); }
.active-count { color: var(--link); }
/* Facts grid lines drawn by each cell, so a short last row leaves white space, not a block of line color. */
.facts { background: var(--bg-raised); }
.facts div { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }