@font-face { font-family: "Midkemia Initial"; src: url("fonts/midkemia-initial.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Midkemia Display"; src: url("fonts/midkemia-display.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond.ttf") format("truetype"); font-weight: 400 800; font-style: normal; font-display: swap; }
/* MIDKEMIA CLASSIC
   Midnight stone / silver / aged gold.
   Text remains HTML; the supplied vector fonts are hosted locally. */
:root {
  color-scheme: dark;
  --night-deep: #080f17;
  --night: #0b131d;
  --panel: #111e2a;
  --panel-raised: #182735;
  --text: #e9e9df;
  --muted: #afbbc6;
  --gold: #c6ac7b;
  --gold-light: #e0c796;
  --success: #b5cbb8;
  --warning: #e0b4a4;
  --frost: #adc8d7;
  --shadow: #000000;
  /* Four surface levels. Gold marks actions, not every container. */
  --panel-fill: linear-gradient(135deg, var(--panel-raised), var(--panel));
  --field: var(--panel);
  --inset: var(--panel);
  --line: color-mix(in srgb, var(--muted) 22%, transparent);
  --line-soft: color-mix(in srgb, var(--muted) 12%, transparent);
  --control-line: color-mix(in srgb, var(--muted) 38%, transparent);
  --hover: color-mix(in srgb, var(--gold) 7%, var(--panel));
  --field-hover: var(--panel-raised);
  --selected: color-mix(in srgb, var(--gold) 12%, var(--panel));
  --action-text: var(--night-deep);
  --action-fill: linear-gradient(120deg, var(--gold-light), var(--gold));
  --action-hover: var(--gold-light);
  --focus-ring: var(--gold-light);
  /* Deliberate exception: the mage's oxblood leather, only for the header CTA. */
  --leather: #603032;
  --leather-deep: #402427;
  --leather-hover: #74393a;
  --range-available: #647d8d;
  --heading-size: clamp(32px, 3.2vw, 44px);
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Segoe UI", Arial, sans-serif;
  --page-width: 1224px;
}