:root {
  /* ブランドカラー */
  --color-navy:        #1A1A2E;
  --color-navy-light:  #16213E;
  --color-blue:        #2563EB;
  --color-blue-hover:  #1D4ED8;
  --color-blue-light:  #EFF6FF;
  --color-cyan:        #06B6D4;
  --color-cyan-light:  #ECFEFF;

  /* 背景 */
  --color-bg-page:     #F8F7F4;
  --color-bg-card:     #FFFFFF;
  --color-bg-section:  #F1F0ED;

  /* テキスト */
  --color-text-primary:   #111827;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  /* ボーダー */
  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* ステータス */
  --color-success:       #10B981;
  --color-success-light: #ECFDF5;
  --color-warning:       #F59E0B;
  --color-warning-light: #FFFBEB;
  --color-error:         #EF4444;
  --color-error-light:   #FEF2F2;
  --color-info:          #3B82F6;
  --color-info-light:    #EFF6FF;
  --color-preview:       #7C3AED;
  --color-preview-light: #F5F3FF;

  /* フォント */
  --font-sans:    'Noto Sans JP', sans-serif;
  --font-numeric: 'Inter', 'Noto Sans JP', sans-serif;

  /* スペーシング */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* 角丸 */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* シャドウ */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
}