/* variables.css — design tokens */
:root {
  /* Colors */
  --color-bg:          #F8F9FA;
  --color-surface:     #FFFFFF;
  --color-accent:      #4F46E5;
  --color-accent-dark: #3730A3;
  --color-x:           #4F46E5;
  --color-o:           #EF4444;
  --color-line:        #D1D5DB;
  --color-win-hl:      #FDE047;
  --color-text:        #111827;
  --color-text-muted:  #6B7280;
  --color-overlay-bg:  rgba(17, 24, 39, 0.75);

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-xl:  40px;

  /* Board */
  --board-size: min(80vw, 360px);
  --cell-gap:   6px;
  --border-radius: 12px;

  /* Typography */
  --font-family: 'Segoe UI', 'PingFang TC', 'Noto Sans TC', sans-serif;
  --font-size-title:    clamp(1.8rem, 5vw, 2.4rem);
  --font-size-subtitle: clamp(0.85rem, 2.5vw, 1rem);
  --font-size-symbol:   clamp(2rem, 8vw, 3.2rem);
  --font-size-status:   clamp(0.9rem, 3vw, 1.05rem);

  /* Transition */
  --transition-fast: 150ms ease;
  --transition-mid:  250ms ease;
}