/* chrome.css — base + navbar + footer + theme-toggle, ported from mtgkubbur.is.
   Hand-maintained; references tokens from tokens.css. Re-check against
   mtgkubbur.is/app/static/css/mtg.css if the site chrome changes. */

/* base (mtgkubbur.is input.css @layer base) */
body {
  margin: 0;
  background: var(--body-bg);
  color: var(--text-body);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text-primary); }
a { color: var(--mtg-blue); text-decoration: none; }
.site-main { min-height: 60vh; }

/* navbar (always-dark in both themes) */
.site-nav { display: flex; align-items: center; gap: 0.25rem; padding: 0.6rem 1.25rem; position: relative;
  background: linear-gradient(180deg, #1a1008 0%, #0d0700 100%);
  box-shadow: 0 1px 0 0 rgba(201, 168, 76, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.site-nav::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5) 20%, #c9a84c 50%, rgba(201,168,76,0.5) 80%, transparent); }
.nav-brand { font-weight: 700; font-size: 1.15rem; margin-right: 1rem; text-decoration: none;
  background: linear-gradient(135deg, #f0e6d0 0%, #c9a84c 40%, #e8d8a8 60%, #c9a84c 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links { display: flex; gap: 0.25rem; }
.nav-link { color: rgba(249,250,244,0.7); padding: 0.35rem 0.85rem; border-radius: 4px; font-weight: 500;
  font-size: 0.9rem; text-decoration: none; transition: color .2s, background .2s; position: relative; }
.nav-link:hover { color: #f9faf4; background: rgba(249,250,244,0.08); }
.nav-link.active { color: #f9faf4; background: rgba(201,168,76,0.12); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.nav-skra { color: rgba(249,250,244,0.7); text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
.nav-skra:hover { color: #f9faf4; }
.nav-skra.active { color: #c9a84c; }
.theme-toggle { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(201,168,76,0.3);
  background: rgba(255,255,255,0.04); color: #f9faf4; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
[data-theme="dark"] .site-nav { background: linear-gradient(180deg, rgba(18,18,26,0.97), rgba(14,14,20,0.99));
  box-shadow: 0 1px 0 0 rgba(212,168,67,0.15); }
[data-theme="dark"] .nav-brand { background: linear-gradient(135deg, #f0dca0, #d4a843, #c49630);
  -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .nav-link.active { color: #d4a843; background: rgba(212,168,67,0.08); }
@media (max-width: 640px) { .nav-links { flex-wrap: wrap; } .nav-brand { font-size: 1rem; } }

/* footer */
.site-footer { color: var(--text-muted); font-size: 0.8rem; padding: 1.5rem 1.25rem 1.25rem;
  position: relative; background: linear-gradient(180deg, #f5f2ed 0%, #eae6e0 100%); text-align: center; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3) 20%, rgba(201,168,76,0.5) 50%, rgba(201,168,76,0.3) 80%, transparent); }
[data-theme="dark"] .site-footer { background: linear-gradient(180deg, #16161e 0%, #0e0e14 100%); }
[data-theme="dark"] .site-footer::before { background: linear-gradient(90deg, transparent, rgba(212,168,67,0.2) 30%, rgba(212,168,67,0.35) 50%, rgba(212,168,67,0.2) 70%, transparent); }
.footer-brand { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; display: block; margin-bottom: 2px; }
.footer-tagline { font-size: 0.75rem; color: var(--text-muted); }
.footer-nav { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; flex-wrap: wrap; justify-content: center; }
.footer-nav a { color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-decoration: none; }
.footer-nav a:hover { color: var(--mtg-blue); }
[data-theme="dark"] .footer-nav a:hover { color: var(--mtg-gold); }
.footer-mana-sep { font-size: 0.65rem; opacity: 0.35; vertical-align: middle; }
[data-theme="dark"] .footer-mana-sep { opacity: 0.25; }