/* Sovereign Vellum: Sovereign with stacked hex stats, light and dark. In light mode everything turns warm vellum,
   the rail included: gold frames, gold-brown headings, wine links and buttons. Dark mode is Sovereign as it is. */
@import url("sovereign-hex-stacked.css");

/* Light and dark again: undo Sovereign's dark-only lock and bring back Valhalla's mode button. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-toggle { display: revert; }

:root {
  /* light-dark(light, dark); the dark values are Sovereign's. */
  --bg: light-dark(#f2e8d3, #110a0e);
  --bg-raised: light-dark(#fbf5e7, #1a1016);
  --bg-sunken: light-dark(#e7dbc0, #0b0609);
  --row-alt: light-dark(#f7efdc, #150d12);
  --row-hover: light-dark(#efe2c4, #22151c);
  --row-selected: light-dark(#f0d9a2, #33260f);
  --line: light-dark(#ddcda9, #2e1d26);
  --line-strong: light-dark(#c4ad7f, #45303a);
  --text: light-dark(#2a1a10, #f3ebe0);
  --text-dim: light-dark(#5e4b39, #c2b3a6);
  --text-faint: light-dark(#6d5a46, #a6978b);
  --accent: light-dark(#7a2236, #d9b45f);
  --accent-ink: light-dark(#fff, #1a1104);
  --link: light-dark(#7a2236, #e9cd85);
  --best: light-dark(#efd9a0, #3b2f12);
  --new: light-dark(#2d6e3e, #8fd3a8);
  --new-ink: light-dark(#fff, #06150c);
  --preorder: light-dark(#444ca8, #b3b8ff);
  --preorder-ink: light-dark(#fff, #0b0d2a);
  --bonus: light-dark(#8a6418, #e9cd85);
  --bonus-ink: light-dark(#fff, #1a1104);
  --soldout: light-dark(#6d5a46, #85767d);
  --soldout-ink: light-dark(#fff, #110a0e);
  --heading-ink: light-dark(#6e4e12, #efd896);
  --ability-ink: light-dark(#7a2236, #d9b45f);
  --thead-bg: light-dark(#eadcbc, #22141b);
  --thead-ink: light-dark(#6e4e12, #e9cd85);
  --mark-fill: light-dark(#b8903e, #d9b45f);
  --mark-ink: light-dark(#2a1a10, #1a1104);
  --gold-line: light-dark(#b08a3a, #d9b45f);
  --frame: color-mix(in srgb, var(--gold-line) 55%, transparent);
  --page-bg:
    radial-gradient(ellipse 60% 40% at 60% 0%, light-dark(rgb(255 250 235 / .9), rgb(120 40 70 / .28)), transparent 70%) no-repeat,
    radial-gradient(ellipse 50% 40% at 0% 100%, light-dark(rgb(150 110 50 / .1), transparent), transparent 70%) no-repeat fixed,
    var(--bg);
  --topbar-bg: linear-gradient(180deg, light-dark(#f8efdc, #26141d), light-dark(#eadcbc, #120a0e));
  --tab-active-ink: light-dark(#7a2236, #d9b45f);
  --shadow: 0 10px 30px light-dark(rgb(60 40 10 / .12), rgb(0 0 0 / .45));
}
.topbar .tabs a[aria-current="page"] { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-line) 16%, transparent), transparent); }
@media (min-width: 900px) {
  .topbar { box-shadow: inset -1px 0 0 var(--frame), inset -6px 0 0 light-dark(#f2e8d3, #0b0609), inset -7px 0 0 color-mix(in srgb, var(--gold-line) 30%, transparent); }
}
.fcard, .card-frame, .ability, .highlight, .buy-row, .bonus-panel { outline-color: color-mix(in srgb, var(--gold-line) 28%, transparent); }
.fcard:hover { box-shadow: var(--shadow), 0 0 24px color-mix(in srgb, var(--gold-line) 15%, transparent); }
/* Gold buttons and chips keep dark text in both modes; the light accent ink is white. */
.btn:not(.ghost), .chip[aria-pressed="true"] { color: #1a1104; }