/* =============================================================
   全快堂 患者向けサイト — デザイントークン（唯一の変更点）
   -------------------------------------------------------------
   トーン: 端正・静的・低彩度・緑基調・余白重視・文字大きめ。
   ★看板の緑が確定したら、まず --brand-green-700 / -100 / -accent の
     3つだけ差し替える。他の色はここから派生させている想定。
   ============================================================= */

:root {
  /* --- ブランドの緑（暫定・引き継ぎ書の値。要差し替え） --- */
  --brand-green-700: #0F6E56; /* ヘッダー等の深緑（主色） */
  --brand-green-100: #E1F5EE; /* 淡緑（背景の面） */
  --brand-green-accent: #1D9E75; /* アクセント（装飾・非テキスト用） */

  /* 主色から派生した濃淡（hover・境界・淡面に使用） */
  --brand-green-800: #0B5744; /* 主色より濃い（hover / 押下） */
  --brand-green-600: #157F63;
  --brand-green-50:  #F1FAF7; /* ごく淡い面（セクション交互の下地） */

  /* --- 無彩色（文字・境界・背景） --- */
  --ink:        #1A2420; /* 本文（緑みのある濃墨。高コントラスト） */
  --ink-soft:   #47554F; /* 補足テキスト */
  --ink-muted:  #616E68; /* キャプション・メタ（淡背景でもAA 4.5以上を確保） */
  --line:       #D9E6E1; /* 罫線・カード境界 */
  --line-soft:  #EAF1EE;
  --surface:    #FFFFFF; /* カード等の面 */
  --bg:         #FFFFFF; /* ページ背景 */
  --bg-tint:    #F7FAF9; /* 交互セクションの背景 */

  /* 反転面（深緑の帯）上のテキスト */
  --on-brand:        #FFFFFF;
  --on-brand-soft:   #D6EDE5;

  /* 状態色（お知らせ種別など・低彩度で） */
  --accent-info: #1D9E75;
  --focus-ring:  #1D9E75;

  /* --- タイポグラフィ（高齢・代理閲覧想定で大きめ） --- */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo",
               system-ui, sans-serif;

  --text-xs:   0.875rem;  /* 14px */
  --text-sm:   1rem;      /* 16px */
  --text-base: 1.125rem;  /* 18px（本文の基準・大きめ） */
  --text-md:   1.25rem;   /* 20px */
  --text-lg:   1.5rem;    /* 24px */
  --text-xl:   1.875rem;  /* 30px */
  --text-2xl:  2.375rem;  /* 38px */
  --text-3xl:  3rem;      /* 48px（ヒーロー見出し） */

  --leading-tight: 1.4;
  --leading-normal: 1.8;  /* 和文は広め */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --- 余白（余白重視のため広めのスケール） --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5.5rem;
  --space-16: 8rem;

  /* --- レイアウト --- */
  --container: 1120px;
  --container-narrow: 760px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* --- 影（静的トーンのため最小限・柔らかく） --- */
  --shadow-sm: 0 1px 2px rgba(16, 40, 33, 0.05);
  --shadow: 0 6px 24px rgba(16, 40, 33, 0.07);

  /* --- モーション（控えめ） --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}