/* ============================================================
   design-tokens.css — Medeco Navi デザイントークン定義
   ============================================================ */

:root {
  /* ─── フォント ─── */
  --font-primary:   "Noto Sans JP", sans-serif;
  --font-secondary: "Noto Sans JP", sans-serif;

  /* ─── ブランドカラー ─── */
  --color-primary:       #F36219;
  --color-primary-hover: #D9521A;
  --color-primary-light: #FEF0E8;

  /* ─── テキスト ─── */
  --color-text:          #222426;
  --color-text-sub:      #6C7580;
  --color-text-muted:    #9DA7B2;
  --color-text-disabled: #BAC2CC;

  /* ─── 背景 ─── */
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F5F7FA;
  --color-bg-hover:      #EDF0F2;

  /* ─── 枠線 ─── */
  --color-border:        #D5DCE3;

  /* ─── 機能カラー ─── */
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-info:          #3B82F6;

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

  /* ─── フォントサイズ ─── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* ─── フォントウェイト ─── */
  --font-normal:  400;
  --font-medium:  500;
  --font-bold:    700;

  /* ─── 行間 ─── */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

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

  /* ─── シャドウ ─── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 40px rgba(0,0,0,0.14);

  /* ─── トランジション ─── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ─── z-index ─── */
  --z-base:    0;
  --z-above:   10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-fixed:   300;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;

  /* ─── ブレークポイント（参考） ─── */
  /* --bp-sm:  640px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */

  /* ─── コンテナ最大幅 ─── */
  --container-max: 1200px;
  --container-padding: var(--space-6);
}