:root {
  --color-bg: #17110d;
  --color-bg-glow: #3a2616;
  --color-surface: #261c14;
  --color-surface-raised: #33261b;
  --color-text: #efe3c8;
  --color-muted: #a8977a;
  --color-border: #5a4527;
  --color-accent: #8f2d2d;
  --color-accent-text: #fbefd0;
  --color-gold: #d9a93c;
  --color-gold-bright: #f3cf6e;
  --color-profit: #7fcf86;
  --color-loss: #ef8a80;
  --color-buy: #2f6b3a;
  --color-sell: #8f2d2d;
  --color-field: #120d0a;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius: 0.4rem;
  --tap: 2.75rem; /* 44px minimum touch target */
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-display: "Cinzel", "Trajan Pro", "Iowan Old Style", Georgia, serif;
  --shadow-card: 0 2px 0 #0b0806, inset 0 0 0 1px rgba(243, 207, 110, 0.08);
  --page-width: 32rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--color-bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, var(--color-bg-glow), var(--color-bg) 60%) fixed var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}

h1, h2 {
  margin: 0 0 var(--space-2);
  line-height: 1.2;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--color-gold-bright);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-gold); }
small { font-size: 0.8em; }

.muted { color: var(--color-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.profit { color: var(--color-profit); }
.loss { color: var(--color-loss); }
.empty { color: var(--color-muted); font-style: italic; }