/* ═══════════════════════════════════════════════════
   Design Tokens — Shared variables for 4ox.kr games
   ═══════════════════════════════════════════════════ */

:root {
  /* Background */
  --bg-primary: #0D1117;
  --bg-secondary: #161B22;
  --bg-tertiary: #21262D;

  /* Text */
  --text-primary: #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted: #484F58;

  /* Accent */
  --accent: #3B82F6;
  --accent-glow: rgba(59, 130, 246, 0.3);

  /* Border */
  --border: #30363D;

  /* Button */
  --btn-bg: #21262D;
  --btn-active: #30363D;

  /* Overlay */
  --overlay-bg: rgba(0, 0, 0, 0.85);

  /* Board */
  --board-bg: #0A0E14;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F6F8FA;
    --bg-tertiary: #E9ECF0;
    --text-primary: #1B1E28;
    --text-secondary: #57606A;
    --text-muted: #8C959F;
    --accent: #3182F6;
    --accent-glow: rgba(49, 130, 246, 0.2);
    --border: #D0D7DE;
    --btn-bg: #E9ECF0;
    --btn-active: #D0D7DE;
    --overlay-bg: rgba(255, 255, 255, 0.9);
    --board-bg: #F0F2F5;
  }
}

/* ── data-theme forced dark ── */
html[data-theme="dark"] {
  --bg-primary: #0D1117;
  --bg-secondary: #161B22;
  --bg-tertiary: #21262D;
  --text-primary: #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted: #484F58;
  --accent: #3B82F6;
  --accent-glow: rgba(59, 130, 246, 0.3);
  --border: #30363D;
  --btn-bg: #21262D;
  --btn-active: #30363D;
  --overlay-bg: rgba(0, 0, 0, 0.85);
  --board-bg: #0A0E14;
}

/* ── data-theme forced light ── */
html[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F6F8FA;
  --bg-tertiary: #E9ECF0;
  --text-primary: #1B1E28;
  --text-secondary: #57606A;
  --text-muted: #8C959F;
  --accent: #3182F6;
  --accent-glow: rgba(49, 130, 246, 0.2);
  --border: #D0D7DE;
  --btn-bg: #E9ECF0;
  --btn-active: #D0D7DE;
  --overlay-bg: rgba(255, 255, 255, 0.9);
  --board-bg: #F0F2F5;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
