/* CSS Variables - Color Palette & Design Tokens */
:root {
  /* 背景色 (Default: Light Mode) */
  --kaku-bg-primary: #ffffff;
  --kaku-bg-secondary: #ffffff;
  --kaku-bg-tertiary: #f5f5f5;

  /* テキスト色 */
  --kaku-text-primary: #000000;
  --kaku-text-secondary: #444444;
  --kaku-text-inverse: #ffffff;

  /* アクセント色（モノクローム規定：R=G=B） */
  --kaku-accent-primary: #000000;
  --kaku-accent-primary-rgb: 0, 0, 0;
  --kaku-accent-secondary: #333333;
  --kaku-accent-danger: #666666;

  /* ボーダー色 */
  --kaku-border-light: #e0e0e0;
  --kaku-border-medium: #888888;

  /* 市松模様（キャンバス背景） */
  --kaku-checkerboard-dark: #cccccc;
  --kaku-checkerboard-light: #ffffff;

  /* 市松模様用（略称） */
  --check-1: #cccccc;
  --check-2: #ffffff;

  /* キャンバス背景色（白紙モード） */
  --kaku-canvas-bg: #ffffff;

  /* グリッド線 */
  --kaku-grid-line: rgba(0, 0, 0, 0.1);

  /* 影 */
  --kaku-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --kaku-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --kaku-shadow-lg: 0 0 20px rgba(0, 0, 0, 0.1);

  /* ゴースト背景 (微妙なハイライト・スロット等用) */
  --kaku-bg-ghost: rgba(0, 0, 0, 0.05);
  --kaku-bg-ghost-strong: rgba(0, 0, 0, 0.1);

  /* ドック・ツールバー設定 */
  --palette-bg: rgba(255, 255, 255, 0.9);
  --palette-bg-blur: rgba(255, 255, 255, 0.7);
  --kaku-bg-glass: rgba(255, 255, 255, 0.8);

  /* 旧変数名のエイリアス (Reactive) */
  --bg-color: var(--kaku-bg-primary);
  --panel-bg: var(--kaku-bg-secondary);
  --accent-color: var(--kaku-accent-primary);
  --accent-color-rgb: var(--kaku-accent-primary-rgb);
  --text-color: var(--kaku-text-primary);
  --kaku-text-main: var(--kaku-text-primary);
  --border-color: var(--kaku-border-light);
  --toolbar-bg: var(--kaku-bg-secondary);
  --text-muted: var(--kaku-text-secondary);
}

/* ダークモード用変数（bodyに .dark-mode が付与された場合に適用） */
@media screen {
  body.dark-mode {
    /* 背景色 (Dark Mode) */
    --kaku-bg-primary: #121212;
    --kaku-bg-secondary: #1e1e1e;
    --kaku-bg-tertiary: #2a2a2a;

    /* テキスト色 */
    --kaku-text-primary: #e0e0e0;
    --kaku-text-secondary: #b0b0b0;
    --kaku-text-inverse: #000000;

    /* アクセント色 */
    --kaku-accent-primary: #ffffff;
    --kaku-accent-primary-rgb: 255, 255, 255;
    --kaku-accent-secondary: #cccccc;
    --kaku-accent-danger: #888888;

    /* ボーダー色 */
    --kaku-border-light: #333333;
    --kaku-border-medium: #555555;

    /* 市松模様 */
    --kaku-checkerboard-dark: #222222;
    --kaku-checkerboard-light: #2a2a2a;
    --check-1: #222222;
    --check-2: #2a2a2a;

    /* キャンバス背景色 */
    --kaku-canvas-bg: #1e1e1e;

    /* グリッド線 */
    --kaku-grid-line: rgba(255, 255, 255, 0.1);

    /* 影 */
    --kaku-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.5);
    --kaku-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.8);
    --kaku-shadow-lg: 0 0 20px rgba(0, 0, 0, 0.5);

    /* ゴースト背景 (微妙なハイライト・スロット等用) */
    --kaku-bg-ghost: rgba(255, 255, 255, 0.05);
    --kaku-bg-ghost-strong: rgba(255, 255, 255, 0.1);

    /* ドック・ツールバー設定 */
    --palette-bg: rgba(30, 30, 30, 0.9);
    --palette-bg-blur: rgba(30, 30, 30, 0.7);
    --kaku-bg-glass: rgba(30, 30, 30, 0.8);
  }
}

:root {
  /* Z-index (共通) */
  --z-index-canvas: 10;
  --z-index-minimap: 90;
  --z-index-dock: 100;
  --z-index-float-nav: 150;
  --z-index-dock-palette: 200;
  --z-index-dock-popover: 300;
  --z-index-popup-menu: 500;
  --z-index-modal: 5000;
  --z-index-toast: 6000;
  --z-index-cursor: 9990;
  --z-index-splash: 10000;

  /* ドック・ツールバー設定 (共通) */
  --dock-thickness: 68px;
  --palette-bar-height: 64px;
  --swatch-size: 40px;
  --swatch-gap: 12px;

  /* トランジション (共通) */
  --kaku-transition-fast: 0.1s;
  --kaku-transition-normal: 0.2s;

  /* 安全エリア（モバイル対応） */
  --kaku-safe-area-bottom: env(safe-area-inset-bottom);
}