:root {
  /* Brand palette */
  --brand-orange: #f76c00;
  --brand-orange-glow: rgba(247, 108, 0, 0.4);
  --brand-red: #8b0000;
  --brand-red-alt: #a30000;

  /* Surfaces */
  --bg-base: #0a0a0a;
  --bg-elevated: #141414;
  --bg-card: rgba(20,20,20,0.75);

  /* Text */
  --text-primary: #ffffff;
  --text-muted: #b8b8b8;
  --text-dim: #7a7a7a;

  /* Borders + accents */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-orange: rgba(247, 108, 0, 0.35);

  /* Type */
  --font-display: "Fredoka One", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 40px;
  --space-7: 60px; --space-8: 96px;
  --radius: 12px;  --radius-lg: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); line-height: 1.5; }
body { display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-orange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }