/* Holo Red (Space) colour and type tokens: the same names as theme-fantasy.css, in the
   red-black look of the Shop and SW5E Tables. They apply when assets/js/theme.js sets
   data-theme="space" on <html>. The extra attribute makes these win over the Fantasy :root. */
:root[data-theme="space"] {
  --bg: #0a0808;
  --panel: #150f10;
  --panel-2: #1e1517;
  --line: #3d2226;
  /* Lighter than the Shop's border so ghost buttons and filters stay visible (about 4:1). */
  --line-2: #8a6a6e;
  --text: #f0e4e5;
  /* Brighter than the Shop's #a3898c so descriptions read as easily as in Fantasy (8.6:1 on panels). */
  --dim: #c0a9ac;
  --accent: #c40f0f;
  --accent-hover: #e0191a;
  --on-accent: #ffffff;
  /* The button red is too dark for small text on near-black, so text uses a lighter red (6:1). */
  --accent-text: #ff5566;
  --sw: #8fd0ff;
  --dnd: #ff5566;
  --oth: #e0b34f;
  --mixed: #7ddc9a;
  --chip-bg: rgba(10, 8, 8, 0.75);
  --bar-top: rgba(26, 17, 19, 0.97);
  --bar-bottom: rgba(14, 10, 11, 0.97);
  --glow: rgba(196, 15, 15, 0.26);
  --art-fade: rgba(10, 8, 8, 0.94);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: 6px;
  /* Exo 2 keeps a sci-fi feel but stays open and easy to read in mixed case at every heading size.
     Russo One is only used for the small brand name, like the SW5E Tables header. */
  --font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-brand: "Russo One", "Exo 2", system-ui, sans-serif;
  --bold: 700;

  /* Generated card art for games without a cover (assets/js/games.js) */
  --art-sw: linear-gradient(180deg, #0A0F18, #1A2433);
  --art-dnd: linear-gradient(180deg, #1E0A10, #5A1218);
  --art-oth: linear-gradient(180deg, #1A1008, #4A2C12);
  --art-mixed: linear-gradient(180deg, #08130E, #17382A);
  --art-planet: radial-gradient(circle at 32% 30%, #DDF1FF, #8FD0FF 42%, #1F4E7A 82%);
  --art-ring: rgba(240, 228, 229, 0.5);
  --art-moon: radial-gradient(circle at 40% 40%, #FFE9E0, #FF9A8A 60%, rgba(255, 154, 138, 0) 72%);
  --art-sun: radial-gradient(circle at 40% 40%, #FFFBEA, #E0B34F 55%, rgba(224, 179, 79, 0) 74%);
  --stars-a: rgba(240, 228, 229, 0.75);
  --stars-b: rgba(143, 208, 255, 0.5);

  /* Dark scrollbars, like the SW5E Tables page. */
  color-scheme: dark;
}

/* The few Space details that are more than a token swap: the top bar's brand name. */
:root[data-theme="space"] .tb-name {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--accent-text);
}