/* ===================================================================
 * デザイントークン — FRONTEND_UI_SPEC.md §3 準拠
 * 子テーマで --color-primary 系を上書きしてブランドを切り替える
 * =================================================================== */

:root {
  /* ── ブランドカラー（子テーマで上書き） ── */
  --color-primary:        #2563EB;
  --color-primary-dark:   #1D4ED8;
  --color-primary-light:  #DBEAFE;
  --color-primary-faint:  #EFF6FF;

  /* ── Neutral ── */
  --color-neutral-900:    #111827;
  --color-neutral-700:    #374151;
  --color-neutral-600:    #4B5563;
  --color-neutral-400:    #9CA3AF;
  --color-neutral-300:    #D1D5DB;
  --color-neutral-100:    #F3F4F6;
  --color-white:          #FFFFFF;

  /* ── セマンティックカラー ── */
  --color-success:        #16A34A;
  --color-warning:        #D97706;
  --color-error:          #DC2626;
  --color-warning-light:  #FEF3C7;
  --color-success-light:  #ECFDF5;
  --color-success-dark:   #15803D;
  --color-error-light:    #FEF2F2;
  --color-error-dark:     #B91C1C;
  --color-info-light:     var(--color-primary-faint);
  --color-warning-dark:   #B45309;

  /* ── テキスト ── */
  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-400);
  --color-text-inverse:   var(--color-white);

  /* ── 背景 ── */
  --color-bg-white:       var(--color-white);
  --color-bg-subtle:      var(--color-neutral-100);
  --color-bg-warm:        #FAFAF8;

  /* ── ボーダー ── */
  --color-border-default: var(--color-neutral-300);
  --color-border-focus:   var(--color-primary);
  --color-border-error:   var(--color-error);

  /* ── タイポグラフィ ── */
  --font-family-base:     'Noto Sans JP', 'Hiragino Sans', 'YuGothic', sans-serif;
  --line-height-heading:  1.3;
  --line-height-body:     1.8;
  --letter-spacing-heading: 0.03em;
  --letter-spacing-body:  0.01em;

  /* ── スペーシング ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-card:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* ── Duration ── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --easing-smooth:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ── z-index ── */
  --z-nav:      100;
  --z-dropdown: 200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;
}