/**
 * CSS変数定義
 */

:root {
  /* レイアウト */
  --slot-width: 140px;
  --slot-height: 140px;
  --gap: 18px;
  --min-display-width: calc(var(--slot-width) * 9.8);

  /* タイポグラフィ */
  --font-size: 1rem;

  /* カラーパレット */
  --color-bg: #f2f2f2;
  --color-text: #333;
  --color-text-dark: #111;
  --color-border: #bdbdbd;
  --color-border-light: #d1d1d1;
  --color-border-hover: #888;
  --color-white: #fff;
  --color-button-bg-start: #bdbdbd;
  --color-button-bg-end: #e0e0e0;
  --color-button-hover-start: #9e9e9e;
  --color-button-hover-end: #cccccc;
  --color-button-active-start: #757575;
  --color-button-active-end: #bdbdbd;
  --color-button-border: #b0b0b0;
  --color-controls-bg: #f5f5f5;
  --color-pool-bg: #e3e3e3;
  --color-pool-border: #aaa;
  --color-label-overlay: rgba(60, 60, 60, 0.85);
  --color-twitter: #1DA1F2;
  --color-error: #ff5252;

  /* シャドウ */
  --shadow-sm: 0 2px 6px rgba(120, 120, 120, 0.10);
  --shadow-md: 0 2px 8px rgba(100, 100, 100, 0.07);
  --shadow-lg: 0 4px 12px rgba(120, 120, 120, 0.18);
  --shadow-xl: 0 6px 16px rgba(120, 120, 120, 0.18);
  --shadow-hover: 0 4px 16px rgba(120, 120, 120, 0.13);
  --shadow-touch: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-error: 0 4px 12px rgba(0, 0, 0, 0.3);
}