:root {
  --color-normal: #c8c8c8;
  --color-magic: #8888ff;
  --color-rare: #ffff77;
  --color-unique: #ef6916;
  --color-gem: #1ba29b;
  --color-gem-r: #c44040;
  --color-gem-g: #4aad4a;
  --color-gem-b: #6666aa;
  --color-gem-w: #aaaaaa;
  --color-fire: #960000;
  --color-cold: #366492;
  --color-lightning: #ffd700;
  --color-chaos: #d02090;
  --color-prop: #6e9a97;
  --color-default: #7f7f7f;
  --color-crafted: #b4b4ff;
  --color-parchment: #baad85;
  --color-unique-flavour: #af6025;
  --color-gem-tab: #1e2929;
  --color-unique-divider: #c87a30;
  --color-keystone: #8888ff;
  --color-keystone-glow: rgba(136, 136, 255, 0.45);
  --color-notable: #d4a13a;
  --color-notable-glow: rgba(212, 161, 58, 0.45);
  /* Affix origins — accent the per-source affix tables */
  --color-corrupted: #d63b3b;
  --color-desecrated: #39ff7a;
}

/* Derived surface shades for dark cards (passive/asc node shells, hovers) */
:root {
  --card-dark-bg: rgba(0, 0, 0, 0.5);
  --card-dark-border: rgba(139, 139, 139, 0.4);
  /* Canonical card hover border — collapses prior 0.5 and 0.6 alpha variants
     to a single value (visually indistinguishable at 1px). */
  --card-hover-border: rgba(200, 200, 200, 0.6);
}

/* Font stacks (matched to the bundled Fontin / Optimus faces) */
:root {
  --font-smallcaps: "FontinSmallCaps", "Fontin SmallCaps", "Palatino Linotype", Georgia, serif;
  --font-regular: "FontinRegular", "Palatino Linotype", Georgia, serif;
  --font-display: 'OptimusPrincepsSemiBold', serif;
}

/* Aliases used by gem-card.css (matches reference variable names) */
:root {
  --gem-color: var(--color-gem);
  --magic-color: var(--color-magic);
  --rare-color: var(--color-rare);
  --unique-color: var(--color-unique);
  --normal-color: var(--color-normal);
  --fire-color: var(--color-fire);
  --cold-color: var(--color-cold);
  --lightning-color: var(--color-lightning);
  --chaos-color: var(--color-chaos);
  --crafted-color: var(--color-crafted);
  --prop-color: var(--color-prop);
  --default-color: var(--color-default);
  --corrupted-color: var(--color-corrupted);
  --desecrated-color: var(--color-desecrated);

  /* Glossary-keyword (.kw) color — the single knob for every hoverable keyword
     across the site (mods, gems, items, affixes). Defaults to the prop teal but
     is its own token so it can be retuned without touching other --color-prop
     uses (card-size buttons, support headings, etc.). */
  --kw-color: var(--color-prop);
  --kw-hover-color: var(--color-rare);
}

:root,
:root[data-theme="dark"] {
  --bg-base: #0d0d0d;
  --bg-surface: #16181f;
  --border: #2a2d3d;
  --text: #c8b888;
}

:root[data-theme="light"] {
  --bg-base: #f8f6f0;
  --bg-surface: #eeebe3;
  --border: #ccc8bb;
  --text: #2a2418;
}