/* ─── SHARED STYLES ───
   Single source of truth for CSS variables, base resets, keyword/icon styles,
   header/nav, and theme overrides. Included by all subsites via <link href="/css/shared.css">.
   Subsite-specific stylesheets can override variables as needed. */

/* ─── FORCE OF WILL FONT ─── */
@font-face {
  font-family: 'Force of Will';
  src: url('/assets/fonts/ForceofWill001.0-Regular.otf') format('opentype'),
       url('/assets/fonts/ForceofWill002.0-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.fow-font { font-family: 'Force of Will', serif; }

/* ─── BASE VARIABLES (dark theme default) ─── */
:root {
  --bg: #0f0f14;
  --bg-secondary: #1a1a24;
  --bg-tertiary: #22222e;
  --bg-hover: #2a2a38;
  --text: #e0e0e0;
  --text-muted: #a0a0a0;
  --text-dim: #666;
  --accent: #c9a84c;
  --accent-dim: #a08838;
  --border: #2a2a3a;
  --link: #7aadff;
  --ban-red: #d44040;
  --wgp-gold: #e8c44a;
  --card-radius: 10px;
}

/* ─── LIGHT THEME OVERRIDES ───
   Uses html[data-theme="light"] for higher specificity than :root,
   so subsite :root overrides (timeline.css, home.css) don't clobber light values. */
html[data-theme="light"] {
  --bg: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eaeaea;
  --text: #1a1a1a;
  --text-muted: #555;
  --text-dim: #888;
  --accent: #9e7c2e;
  --accent-dim: #7a5f22;
  --border: #d0d0d0;
  --link: #2a5db0;
  --bg-hover: #e0e0e0;
  --ban-red: #c0392b;
  --wgp-gold: #9e7c2e;
}

/* ─── RESET & BASE ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── SITE HEADER (db, decks) ─── */
.site-header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.site-logo {
  font-size: 1.1rem; font-weight: 700; color: var(--accent);
  white-space: nowrap;
}
.site-logo:hover { text-decoration: none; }
.header-search { flex: 1; max-width: 600px; }
.header-search input {
  width: 100%; padding: 8px 14px;
  background: var(--bg-tertiary); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.9rem; outline: none;
}
.header-search input:focus { border-color: var(--accent); }
.header-nav { display: flex; gap: 16px; margin-left: auto; align-items: center; }
.header-nav a {
  color: var(--text-muted); font-size: 0.85rem;
  display: flex; align-items: center; gap: 4px;
}
.header-nav a:hover { color: var(--text); text-decoration: none; }

/* ─── SITE NAVIGATION (theme.css shared nav) ─── */
#site-nav {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.site-nav-link {
  padding: 4px 12px; border-radius: 4px; font-size: 0.82rem;
  color: var(--text-muted); text-decoration: none; transition: all 0.12s;
}
.site-nav-link:hover { color: var(--text); background: var(--bg-tertiary); text-decoration: none; }
.site-nav-link.active { color: var(--accent); font-weight: 600; }
.site-nav-link.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-muted); cursor: pointer; font-size: 0.82rem;
  padding: 3px 8px; transition: all 0.15s; margin-left: 4px;
}
.theme-toggle:hover { border-color: var(--text-muted); color: var(--text); }

/* ─── FoW COST / ATTRIBUTE ICONS ─── */
.fow-icon {
  width: 20px; height: 20px; vertical-align: middle;
  margin: 0 1px; display: inline-block;
}

/* ─── CARD FACE HIGHLIGHT/DIM ─── */
.card-face-section, .modal-face-section { transition: opacity 0.2s; }
.card-face-active { opacity: 1; }
.card-face-dim { opacity: 0.45; }
.card-face-dim:hover { opacity: 0.7; }

/* ─── KEYWORD ABILITY STYLES ─── */
.kw {
  display: inline;
  color: #e6edf3; font-weight: 600; font-size: 0.82rem;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid rgba(200,200,200,0.35);
  background: rgba(255,255,255,0.08);
  cursor: help;
}
html[data-theme="light"] .kw {
  color: #1a1a2e; border-color: rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.05);
}
.kw-param {
  font-style: italic; color: #b8a0d8;
}
html[data-theme="light"] .kw-param {
  color: #6a4fa0;
}
.kw-stat {
  font-weight: 700; font-size: 0.84rem;
}
.kw-trigger {
  color: #f0883e; font-weight: 700; font-size: 1rem;
  margin: 0 2px;
}