/* tokens.css — デザイントークン（京都北野病院 介護医療院）
 *
 * カラー       : --color-{role}（記述的・docs/mockups のデザインから採取）
 * フォントサイズ: html{font-size:62.5%}（1rem=10px）前提の --fs-* スケール（規範的）
 * レイアウト   : 繰り返す寸法を -pc/-sp で持つ
 *
 * font-size と色は直書きせず、必ずこのトークンを参照する（my-web-style 規約）。
 */

html {
  /* 1rem = 10px（font-size は rem、余白は px で書くための基準） */
  font-size: 62.5%;
}

:root {
  /* ── Color roles（モックアップ実測値）───────────────────────── */
  --color-primary: #11a079;
  /* ブランドグリーン（見出し・ボタン・フッター） */
  --color-secondary: #3eb292;
  /* 明るい緑（ホバー・アイコン円） */
  --color-tertiary: #7dc389;
  /* 黄緑（特徴アイコン） */
  --color-pink: #ea9daa;
  /* クローバー装飾のピンク */
  --color-font: #666;
  --color-border: #e6e6e6;
  --color-alternate: #fdf9f2;
  /* クリーム帯（介護医療院とは） */
  --color-philosophy: #d9ecd7;
  /* 理念帯のテクスチャ下地 */
  --color-gray: #4b4b4b;
  --color-white: #fff;
  --color-selection-bg: var(--color-primary);
  --color-selection-text: var(--color-white);
  --color-hr: #e6e6e6;

  /* ── Font size scale（規範的・1rem=10px。直書き禁止）─────────── */
  --fs-xxs: 1.1rem;
  /* 11px：モバイルパネル・コピーライト */
  --fs-xs: 1.3rem;
  /* 13px：コピーライト・フッターロゴ肩 */
  --fs-sm: 1.4rem;
  /* 14px：リスト・注記 */
  --fs-base: 1.6rem;
  /* 16px：本文基準 */
  --fs-md: 1.8rem;
  /* 18px：ナビ・キャプション・小ラベル（17-18pxを統合） */
  --fs-lg: 2rem;
  /* 20px：小見出し・ヒーローリード */
  --fs-xl: 2.2rem;
  /* 22px：フッターロゴ */
  --fs-2xl: 2.7rem;
  /* 27px：ヘッダーロゴ */
  --fs-3xl: 3rem;
  /* 30px：セクション見出し・キャッチ・電話番号 */

  /* ── Motion（シグネチャモーション）───────────────────────────
   * 動き(開閉・移動)は --ease-move、色・不透明度の変化は既定の ease でよい。 */
  --duration: 0.3s;
  --duration-slow: 0.6s;
  /* 大きな動き・強調 */
  --ease-move: cubic-bezier(0.77, 0, 0.18, 1);

  /* ── Z-index bands（2つの帯で運用。9999禁止）───────────────── */
  --z-content: 1;
  /* コンテンツ内の前後（0–3） */
  --z-sticky: 10;
  /* sticky・back-to-top */
  --z-header: 11;
  /* header・モバイルパネル */
  --z-nav: 12;
  /* nav-toggle */

  /* ── Layout tokens（px・-pc/-sp でレスポンシブ差分）─────────── */
  --container: 1200px;
  --wrapper: 900px;

  --header-pc: 88px;
  --header-sp: 66px;

  --logo-pc: 55px;
  --logo-sp: 33px;

  --gap-pc: 33px;
  --gap-sp: 22px;
  --gap-mobile: 44px;

  --menu-size: 55px;
  --menu-space: 5.5px;
  --menu-line: 3px;
}