/* moundAI — CSS custom properties and theme variables */

  :root {
    --bg: #0a0c0f;
    --bg2: #111418;
    --bg3: #181c22;
    --bg4: #1e242c;
    --border: #2a3340;
    --border2: #3a4555;
    --text: #c8d4e0;
    --text2: #7a8fa0;
    --text3: #4a5a6a;
    --accent: #00ff88;
    --accent2: #ffaa00;
    --accent3: #00aaff;
    --danger: #ff4455;
    --strike: rgba(70, 110, 160, 0.22);
    --strike-border: rgba(100, 150, 210, 0.5);
    --ball: #1a1a2a;
    --ball-border: #3a4555;
    --planned: #ffaa0044;
    --planned-border: #ffaa00;
    --hit: #00ff8844;
    --hit-border: #00ff88;
    --miss: #ff445544;
    --miss-border: #ff4455;
    --font-mono: 'Share Tech Mono', monospace;
    --font-ui: 'Rajdhani', sans-serif;
    --font-display: 'Orbitron', monospace;
  }
  .light-mode {
    --bg: #f0f4f8;
    --bg2: #e4eaf2;
    --bg3: #d8e0ec;
    --bg4: #ccd6e6;
    --border: #b0bfcf;
    --border2: #8a9aaa;
    --text: #1a2a3a;
    --text2: #4a5a6a;
    --text3: #7a8fa0;
    --accent: #007744;
    --accent2: #cc8800;
    --accent3: #0055cc;
    --danger: #cc2233;
    --strike: #c8f0d8;
    --strike-border: #007744;
    --ball: #dde4ee;
    --ball-border: #8a9aaa;
    --planned: #cc880022;
    --planned-border: #cc8800;
    --hit: #00774422;
    --hit-border: #007744;
    --miss: #cc223322;
    --miss-border: #cc2233;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    transition: background 0.3s, color 0.3s;
  }