/**
 * デザインシステム - タイポグラフィ定義
 * ブランドガイドライン v1.0.0 準拠
 */

:root {
  /* ========================================
     フォントファミリー
     ======================================== */
  
  --font-family-base: Roboto, "游ゴシック", YuGothic, "Yu Gothic", 
                      "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 
                      Arial, "メイリオ", Meiryo, sans-serif;
  --font-family-monospace: 'Courier New', Courier, monospace;
  
  /* ========================================
     フォントサイズ（タイポグラフィスケール）
     ======================================== */
  
  --font-size-h1: 2rem;             /* 32px - 大見出し */
  --font-size-h2: 1.5rem;           /* 24px - 中見出し */
  --font-size-h3: 1.25rem;          /* 20px - 小見出し */
  --font-size-h4: 1.125rem;         /* 18px - サブ見出し */
  --font-size-body: 1rem;           /* 16px - 本文 */
  --font-size-small: 0.875rem;      /* 14px - 小さい本文 */
  --font-size-caption: 0.75rem;     /* 12px - キャプション */
  --font-size-fine: 0.625rem;       /* 10px - 注釈 */
  
  /* ========================================
     フォントウェイト
     ======================================== */
  
  --font-weight-regular: 400;       /* 通常テキスト */
  --font-weight-semibold: 600;      /* セミボールド */
  --font-weight-bold: 700;          /* 太字 */
  
  /* ========================================
     行間
     ======================================== */
  
  --line-height-tight: 1.3;         /* 見出し用 */
  --line-height-normal: 1.5;        /* 通常 */
  --line-height-relaxed: 1.6;       /* 本文用 */
  --line-height-loose: 1.8;         /* ゆったり */
  
  /* ========================================
     カラーパレット - プライマリ
     ======================================== */
  
  --color-primary: #DE5D50;         /* メインアクション */
  --color-primary-light: #E87B6E;   /* ホバー、薄い背景 */
  --color-primary-dark: #BD4F44;    /* アクティブ、シャドウ */
  
  /* ========================================
     カラーパレット - セカンダリ
     ======================================== */
  
  --color-secondary: #525263;       /* サブボタン、見出し */
  --color-secondary-light: #6B6B7E; /* ボーダー、非アクティブ */
  
  /* ========================================
     カラーパレット - ニュートラル
     ======================================== */
  
  --color-text-primary: #333333;    /* メインテキスト */
  --color-text-secondary: #767676;  /* サブテキスト */
  --color-text-disabled: #B8BEC4;   /* 無効テキスト */
  --color-bg: #FFFFFF;              /* ページ背景 */
  --color-bg-alt: #F3F3F3;          /* セクション背景 */
  --color-border: #E0E0E0;          /* ボーダー */
  
  /* ========================================
     カラーパレット - システムカラー
     ======================================== */
  
  --color-success: #198754;         /* 成功 */
  --color-error: #DC3545;           /* エラー */
  --color-warning: #FFC107;         /* 警告 */
  --color-info: #0DCAF0;            /* 情報 */
  
  /* ========================================
     カラーパレット - リンク
     ======================================== */
  
  --color-link: #0056B3;            /* 通常リンク */
  --color-link-hover: #003D82;      /* ホバー */
  --color-link-visited: #551A8B;    /* 訪問済み */
  
  /* ========================================
     スペーシング
     ======================================== */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* ========================================
     ボーダーラディウス
     ======================================== */
  
  --radius-sm: 4px;                 /* ボタン、インプット */
  --radius-md: 8px;                 /* カード */
  --radius-lg: 12px;                /* モーダル */
  --radius-full: 9999px;            /* 円形 */
  
  /* ========================================
     シャドウ
     ======================================== */
  
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.16);
  
  /* ========================================
     トランジション
     ======================================== */
  
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ========================================
     ボタンサイズ
     ======================================== */
  
  --btn-padding-sm: 8px 24px;
  --btn-padding-md: 12px 32px;
  --btn-padding-lg: 16px 48px;
}