/* ==========================================================================
 * cogito design — CSS カスタムプロパティ（設計トークン）
 * すべての CSS ファイルが依存するルート変数。
 * ========================================================================== */

:root {

  /* ===================================
   * カラー — ブランドカラー
   * =================================== */
  --color-teal:       #4EC5C1;          /* メインカラー（ティール/ミント） */
  --color-blue:       #3B82F6;          /* サブカラー（ブルー）            */
  --color-gradient:   linear-gradient(135deg, #4EC5C1 0%, #3B82F6 100%);
  --color-gradient-r: linear-gradient(135deg, #3B82F6 0%, #4EC5C1 100%); /* 逆方向 */

  /* アクセントカラー（小さく使用） */
  --color-pink:       #F472B6;
  --color-yellow:     #FBBF24;

  /* テキストカラー */
  --color-text:       #1F2937;  /* 本文 */
  --color-text-sub:   #6B7280;  /* サブテキスト */
  --color-text-light: #9CA3AF;  /* 薄いテキスト、日付等 */

  /* 背景カラー */
  --color-bg:              #FFFFFF;
  --color-bg-gray:         #F9FAFB;
  --color-bg-teal-light:   rgba(78, 197, 193, 0.06);
  --color-bg-blue-light:   rgba(59, 130, 246, 0.04);

  /* ボーダー */
  --color-border:          #E5E7EB;
  --color-border-light:    #F3F4F6;

  /* フッター */
  --color-footer-bg:       #1A2332;
  --color-footer-text:     rgba(255, 255, 255, 0.82);
  --color-footer-text-sub: rgba(255, 255, 255, 0.48);
  --color-footer-border:   rgba(255, 255, 255, 0.10);

  /* ===================================
   * タイポグラフィ
   * =================================== */
  --font-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;

  /* フォントサイズスケール（px） */
  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  32px;
  --font-size-4xl:  40px;
  --font-size-5xl:  52px;

  /* 行間 */
  --line-height-tight:  1.3;
  --line-height-base:   1.7;
  --line-height-loose:  1.9;

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

  /* ===================================
   * スペーシングスケール（px）
   * =================================== */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 120px;

  /* セクション余白 */
  --section-py:    80px;   /* 上下 padding */
  --section-py-sm: 56px;   /* モバイル上下 padding */

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

  /* ===================================
   * シャドウ
   * =================================== */
  --shadow-sm:   0 1px  4px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.07);
  --shadow-hover:0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-btn:  0 4px 16px rgba(59, 130, 246, 0.28);
  --shadow-btn-hover: 0 6px 24px rgba(59, 130, 246, 0.40);

  /* ===================================
   * コンテナ幅
   * =================================== */
  --container-max:    1100px;
  --container-narrow:  760px;
  --container-wide:   1280px;

  /* ===================================
   * トランジション
   * =================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.20s ease;
  --transition-slow: 0.30s ease;

  /* ===================================
   * z-index 管理
   * =================================== */
  --z-base:    0;
  --z-raised:  10;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ===================================
 * レスポンシブ変数の上書き
 * =================================== */
@media (max-width: 768px) {
  :root {
    --section-py:    56px;
    --font-size-5xl: 36px;
    --font-size-4xl: 30px;
    --font-size-3xl: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-py:    40px;
    --font-size-4xl: 26px;
    --font-size-3xl: 22px;
  }
}