/* ============================================================
   tokens.css
   松口透析内科クリニック｜デザイントークン
   （資料/デザイン_松口透析内科クリニック.md §10 準拠）

   運用ルール：
   - --color-brand (#00960b) は装飾・ロゴ・アイコン・STEPバッジ専用
   - 白文字を載せるCTA背景は --color-primary (#007a09) を使う
   - 本文中の強調・リンクは --color-primary-dark (#005c07)
   - 電話・緊急CTAのみ --color-accent-dark (#a65a3d)
   ============================================================ */

:root {
  /* プライマリグリーン（指定カラー） */
  --color-brand:          #00960b; /* ブランド象徴色：ロゴ・装飾・アイコン */
  --color-primary:        #007a09; /* 実用色：ボタン背景・CTA（WCAG AA 5.54:1） */
  --color-primary-dark:   #005c07; /* 強調：本文リンク・見出し太字（8.29:1） */
  --color-primary-mid:    #3fb548; /* 補助装飾（文字には使わない） */
  --color-primary-light:  #c7e9cb; /* カード背景ハイライト */
  --color-primary-pale:   #e8f5ea; /* セクション背景・タグ・告知バー */

  /* アクセント（温色） */
  --color-accent:         #c8876e; /* 装飾・補助 */
  --color-accent-dark:    #a65a3d; /* 実用色：電話・緊急CTA（WCAG AA 5.06:1） */

  /* ニュートラル */
  --color-bg:             #ffffff;
  --color-bg-alt:         #fafbf8;
  --color-bg-section:     #e8f5ea;
  --color-bg-mild:        #f2f6f2;
  --color-text:           #333333;
  --color-text-muted:     #666666;
  --color-text-light:     #9a9a9a;
  --color-text-heading:   #005c07;
  --color-border:         #e3e7e3;
  --color-border-strong:  #c9d0c9;

  /* タグ色（お知らせ） */
  --color-tag-info:       #007a09;
  --color-tag-closed:     #a65a3d;
  --color-tag-other:      #666666;

  /* タイポグラフィ */
  --font-jp:     "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN", sans-serif;
  --font-en:     "Inter", "Noto Sans", sans-serif;
  --font-num:    "Barlow", "Inter", sans-serif;
  --font-script: "Caveat", "Kaushan Script", cursive;
  --font-serif:  "Cormorant Garamond", "Playfair Display", serif;

  /* フォントサイズ */
  --fs-hero:     clamp(28px, 4vw, 44px);
  --fs-h2:       clamp(22px, 2.5vw, 32px);
  --fs-h3:       clamp(18px, 1.8vw, 24px);
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-tel:      clamp(22px, 2.4vw, 32px);

  /* 行間 */
  --lh-body:     2.0;
  --lh-heading:  1.5;

  /* スペーシング（8pxグリッド） */
  --space-section-pc:       50px;
  --space-section-sp:       50px;
  --space-card-gap:         28px;
  --space-card-padding-pc:  32px;
  --space-card-padding-sp:  24px;

  /* 角丸 */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;

  /* 影 */
  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* コンテナ */
  --container-max:    1120px;
  --container-pad-pc: 60px;
  --container-pad-sp: 20px;

  /* ヘッダー / 告知バー */
  --header-height-pc:   88px;
  --header-height-sp:   64px;
  --notice-bar-height:  52px;

  /* SP 下部固定CTA */
  --sp-fixed-cta-height: 60px;

  /* モーション */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-med:  0.3s;
  --dur-slow: 0.6s;
}