:root {
  --bg: #f9f9f9;
  --secondary-bg: #f3f3f3;
  --card-bg: #ffffff;
  --text: #111111;
  --meta-text: rgba(17, 17, 17, 0.55);
  --border: #e0e0e0;
  --header-color: #111111;
  --button-bg: #000000;
  --button-bg-hover: #444444;
  --button-text: #ffffff;
  --button-secondary-bg: #efefef;
  --button-secondary-bg-hover: #e2e2e2;
  --button-secondary-text: #000000;
  --board-bg: #ffffff;
  --cell-bg: #dce8f0;
  --cell-hover-bg: #b8d4e3;
  --player1-color: #f55a5a;
  --player2-color: #f1c40f;
  --winning-glow: #f1c40f;
  --input-bg: #ffffff;
  --overlay-bg: rgba(200, 200, 200, 0.75);
  --modal-bg: #ffffff;
  --modal-text: #000000;
  --shape-large: 24px;
  --font-family: ProductSansRegular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cell-size: clamp(36px, 6.5vw, 68px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --secondary-bg: #1e1e1e;
    --card-bg: #1a1a1a;
    --text: #eaeaea;
    --meta-text: rgba(234, 234, 234, 0.5);
    --border: #333333;
    --header-color: #eaeaea;
    --button-bg: #ffffff;
    --button-bg-hover: #bbbbbb;
    --button-text: #000000;
    --button-secondary-bg: #2a2a2a;
    --button-secondary-bg-hover: #333333;
    --button-secondary-text: #ffffff;
    --board-bg: #1a1a1a;
    --cell-bg: #3c3c3c;
    --cell-hover-bg: #4a4a4a;
    --input-bg: #1a1a1a;
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --modal-bg: #111111;
    --modal-text: #ffffff;
  }
}