/*
 * Copyright (c) 2026 VitaHub LLC
 * All Rights Reserved.
 *
 * This source code is proprietary and confidential.
 * Use is permitted only with explicit authorization from VitaHub LLC.
 * See the LICENSE file for details.
 */
/* ============================================================
   tokens.css — デザイントークン（配色・タイポ・余白・角丸）
   Modern Medical Luxury：アイボリー基調 + チャコール +
   ロゴ由来アクセント（ゴールド／ネイビー／ピンク）
   ============================================================ */
:root {
  /* ---- 配色（Modern Medical Luxury）---- */
  --ink:        #33333a;   /* 本文・見出し（チャコールグレー） */
  --ink-soft:   #5d5a56;   /* 補助テキスト（ダークグレージュ） */
  --ink-mute:   #8b867f;   /* 注釈（ストーングレー寄り） */
  --ocean:      #a8446f;   /* プライマリ（ロゴピンクを落ち着かせた色／リンク） */
  --ocean-deep: #23315e;   /* 濃色（ロゴネイビー系／見出し強調・ヘッダー文字） */
  --ocean-hover:#c2708f;   /* リンクホバー */
  --ocean-tint: #f6f1ec;   /* アイボリーのセクション地色 */
  --gold:       #a68a4e;   /* ロゴゴールド（罫線・アイコン・見出し飾り） */
  --gold-soft:  #cdbd93;
  --navy:       #23315e;   /* ロゴネイビー */
  --pink:       #a8446f;   /* ロゴピンク（アクセント） */
  --greige:     #b7ada1;   /* ダークグレージュ（枠・装飾） */
  --stone:      #e9e5df;   /* ストーングレー（面・区切り） */
  --ivory:      #f8f6f2;   /* アイボリー（背景） */
  --cyan:       #a68a4e;   /* 区切り線 hr（ゴールドに統一） */
  --sand:       #f8f6f2;   /* 補助の薄色地（アイボリー） */
  --sand-deep:  #efeae2;
  --coral:      #8f2f43;   /* 強調（電話・ページトップ）※派手な赤を避けた深色 */
  --coral-deep: #6f1f31;
  --reserve:    #a8446f;   /* 予約ボタン（ロゴピンク基調） */
  --reserve-deep:#8c3159;

  --surface:    #ffffff;
  --bg:         #fdfcfa;
  --line:       #d8d3cb;
  --line-soft:  #e9e5df;

  --ok:         #1e8e6a;
  --ok-bg:      #e6f5ee;
  --bad:        #c0392b;
  --bad-bg:     #fbe8e5;
  --warn-bg:    #fdf3e3;

  /* ---- タイポグラフィ（現行：本文 Noto Sans JP・見出し Noto Serif JP）---- */
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  --font-serif:   "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-body:    "Noto Sans JP", system-ui, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-num:     "Inter", var(--font-body);

  --fs-root: 18px;       /* a11yの文字サイズ調整で上書き */
  --lh:      1.8;
  --lh-tight:1.4;

  /* ---- 余白・レイアウト ---- */
  --container: 1120px;
  --container-narrow: 820px;
  --gut: clamp(16px, 4vw, 40px);
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- 角丸（控えめ：最大8px）・影 ---- */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(51,51,58,.06), 0 1px 3px rgba(51,51,58,.05);
  --shadow:    0 2px 8px rgba(51,51,58,.07), 0 10px 28px rgba(51,51,58,.06);

  --ring: 0 0 0 3px rgba(168,68,111,.30);  /* フォーカスリング */
  --header-h: 72px;
}

/* a11y: 文字サイズ段階 */
:root[data-fontsize="small"]  { --fs-root: 16px; }
:root[data-fontsize="medium"] { --fs-root: 18px; }
:root[data-fontsize="large"]  { --fs-root: 20px; }