/**
 * Design Tokens - 手ぶらdeお遍路
 * カラー・サイズ・角丸・影・タイポグラフィーのトークン定義
 */

:root {
  /* ==============================
     カラートークン
     ============================== */
  
  --color-primary-50: #f1f8e9;
  --color-primary-100: #e8f5e8;
  --color-primary-200: #c8e6c8;
  --color-primary-300: #a5d6a7;
  --color-primary-400: #81c784;
  --color-primary-500: #66bb6a;
  --color-primary-600: #4caf50;
  --color-primary-700: #388e3c;
  --color-primary-800: #2d5a3d;
  --color-primary-900: #1b5e20;

  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;

  --color-bg-primary: #f1f8e9;
  --color-bg-secondary: #e8f5e8;
  --color-bg-white: #ffffff;
  --color-bg-light: #fafafa;

  --primary-color: var(--color-primary-600);
  --primary-dark:  var(--color-primary-800);
  --secondary-color: var(--color-primary-500);
  --accent-color:   var(--color-warning);

  /* ==============================
     スペーシングトークン
     ============================== */
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;

  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* ==============================
     角丸トークン
     ============================== */
  
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 9999px;

  /* ==============================
     シャドウトークン
     ============================== */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(76, 175, 80, 0.2);

  /* ==============================
     タイポグラフィートークン
     ============================== */
  
  --font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ==============================
     UI要素共通（ボタン・メニュー）
     全画面サイズで統一（スマホサイズ基準）
     ============================== */
  
  --ui-action-font-size: 1rem;
  --ui-action-font-weight: 600;
  --ui-action-line-height: 1.5;
  --ui-action-pad-y: 15px;
  --ui-action-pad-x: 20px;

  /* ==============================
     ブレークポイント
     ============================== */
  
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ==============================
     トランジション
     ============================== */
  
  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;

  /* ==============================
     z-index
     ============================== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ==============================
     フォーカスリング
     ============================== */
  
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-primary-600);
  --focus-ring-offset: 2px;

  /* ==============================
     最小タップサイズ
     ============================== */
  
  --min-tap-size: 44px;

  /* ==============================
     フッターサイズ
     ============================== */

  --surface-footer: var(--color-primary-900);
  --text-on-footer: #fff;
  --text-on-footer-muted: rgba(255,255,255,.86);
  --border-on-footer: rgba(255,255,255,.18);

  --space-footer-y: var(--space-14);
  --space-footer-gap: var(--space-10);
  --space-footer-gap-sm: var(--space-6);
}