/* Hearth Keeper — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f4f2ee;
  --surface-raised: #ffffff;
  --surface-sunken: #e9e5de;
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-stroke: rgba(255, 255, 255, 0.85);
  --glass-on-art: rgba(20, 14, 8, 0.38);
  --hairline: rgba(60, 50, 40, 0.14);
  --rim-gold: rgba(176, 124, 30, 0.55);
  --ink: #000000;
  --ink-secondary: #6b665f;
  --ink-on-art: #ffffff;
  --scrim: rgba(10, 7, 4, 0.55);
  --gold: #8f5b00;
  --gold-fill: #e8a93a;
  --on-gold: #241600;
  --gold-fill-hover: #d99a2b;
  --gold-fill-pressed: #c98c22;
  --mana: #0a64b8;
  --mana-fill: #1f6fd1;
  --win: #00639e;
  --loss: #b23a12;
  --destructive: #c0281e;
  --disabled: #a6a19a;
  --class-deathknight: #c41e3a;
  --class-demonhunter: #a330c9;
  --class-druid: #ff7c0a;
  --class-evoker: #33937f;
  --class-hunter: #aad372;
  --class-mage: #3fc7eb;
  --class-monk: #00ff98;
  --class-paladin: #f48cba;
  --class-priest: #ffffff;
  --class-rogue: #fff468;
  --class-shaman: #0070dd;
  --class-warlock: #8788ee;
  --class-warrior: #c69b6d;
  --shadow-glass: 0 8px 24px rgba(40, 30, 15, 0.14);
  --shadow-art: 0 6px 18px rgba(40, 30, 15, 0.18);
  --shadow-device: 0 30px 60px rgba(40, 30, 15, 0.22);
  --shadow-text-on-art: 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] {
  --surface: #000000;
  --surface-raised: #1c1b19;
  --surface-sunken: #2b2926;
  --glass-fill: rgba(40, 38, 35, 0.58);
  --glass-stroke: rgba(255, 255, 255, 0.16);
  --hairline: rgba(255, 250, 240, 0.14);
  --rim-gold: rgba(242, 184, 75, 0.45);
  --ink: #ffffff;
  --ink-secondary: #a8a39b;
  --gold: #f2b84b;
  --gold-fill: #f2b84b;
  --gold-fill-hover: #f6c870;
  --gold-fill-pressed: #e0a73c;
  --mana: #4cc2ff;
  --win: #5cc8f0;
  --loss: #ff8a5c;
  --destructive: #ff6b5e;
  --disabled: #5c5953;
  --shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-art: 0 6px 18px rgba(0, 0, 0, 0.6);
  --shadow-device: 0 30px 60px rgba(0, 0, 0, 0.7);
}
:root {
  --margin-small: 4px;
  --margin-medium: 8px;
  --margin-large: 16px;
  --margin-extraLarge: 32px;
  --radius-small: 4px;
  --radius-medium: 12px;
  --radius-large: 20px;
  --radius-extraLarge: 28px;
  --radius-capsule: 999px;
  --web-content-width: 1120px;
  --web-text-width: 640px;
  --web-gutter: 32px;
  --web-section-spacing: 128px;
  --web-section-spacing-compact: 80px;
  --web-nav-height: 56px;
  --web-breakpoint: 768px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --font-display: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
.large-title { font-family: var(--font-sans); font-size: 34px; line-height: 41px; font-weight: 700; }
.title2 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; }
.headline { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 400; }
.subheadline { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 400; }
.footnote { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.4px; }
.art-title { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; }
.art-title-small { font-family: var(--font-display); font-size: 20px; line-height: 25px; font-weight: 700; }
.stat { font-family: var(--font-rounded); font-size: 48px; line-height: 52px; font-weight: 700; }
.stat-small { font-family: var(--font-rounded); font-size: 34px; line-height: 41px; font-weight: 700; }
.mana-numeral { font-family: var(--font-rounded); font-size: 17px; line-height: 20px; font-weight: 800; }
.web-display { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 700; letter-spacing: -0.5px; }
.web-display-compact { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.3px; }
.web-title { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.3px; }
.web-title-compact { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 700; }
.web-lead { font-family: var(--font-sans); font-size: 21px; line-height: 30px; font-weight: 400; }
.web-body { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }