/* ═══ Kadai Design Tokens ═══ */

:root {
  /* Font */
  --font: 'Noto Sans JP', system-ui, sans-serif;

  /* Gray — ニュートラルグレー9段階 */
  --white: #FFFFFF;       /* カード背景 */
  --gray-50: #FAFAFA;     /* ページ背景 */
  --gray-100: #F0F0F0;    /* ボーダー */
  --gray-200: #E0E0E0;    /* 無効・副ボーダー */
  --gray-400: #9CA3AF;    /* ラベル・補助 */
  --gray-500: #6B7280;    /* 副テキスト */
  --gray-600: #4B5563;    /* 説明文 */
  --gray-700: #374151;    /* ダークUI中間色 */
  --gray-800: #1F2937;    /* サイドバー背景 */
  --gray-900: #111827;    /* 見出し・本文 */
  --sidebar-bg: #1A1A2E;  /* WSサイドバー専用ダークネイビー */

  /* Indigo — 操作色3段階 */
  --indigo-50: #EEF2FF;   /* 選択背景 */
  --indigo: #6366F1;      /* 操作・選択 */
  --indigo-dark: #4F46E5; /* ホバー */

  /* Semantic — 4色のみ・用途限定 */
  --success: #059669;
  --success-bg: #ECFDF5;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --info: #2563EB;
  --info-bg: #EFF6FF;

  /* Spacing — 4pxグリッド */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shape — UI規約: borderRadius 2-3px 上限。ピル型(9999px)禁止 */
  --radius: 3px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-full: 3px;

  /* Shadow — 3段階（ring+影の組み合わせ） */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);

  /* Typography — 5サイズ × 3ウェイト */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 24px;
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  /* Border — 1px統一 */
  --border: 1px solid var(--gray-100);

  /* Transition */
  --ease: 120ms ease-out;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Icon baseline fix (Phosphor webfont) */
i[class*="ph"] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.3em; vertical-align: middle; }