/* ============================================================
   尾形歯科医院 デザイントークン
   案C「対話と落ち着き」採用
   ============================================================ */

:root {
  /* ── 1. カラー ──────────────────────────────────────────── */

  /* ブランドカラー */
  --c-sage:        #A4B89F;  /* セージグリーン(アクセント・装飾) */
  --c-sage-deep:   #7E9479;  /* セージ濃(リンクhover・ラベル文字) */
  --c-navy:        #2E4858;  /* ネイビー(主要見出し・主要ボタン) */
  --c-navy-deep:   #1F303B;  /* ネイビー濃(フッター背景) */

  /* ニュートラル */
  --c-bg:          #F8F5F0;  /* ページ背景(オフホワイト) */
  --c-white:       #FFFFFF;  /* カード背景・コンテナ */
  --c-beige:       #E8DFD3;  /* ベージュ(装飾・カレンダー定休) */
  --c-beige-light: #F1EBE0;  /* ベージュ淡(注記ボックス) */
  --c-line:        #DDD3C5;  /* 罫線・区切り */

  /* テキスト */
  --c-text:        #2A2A2A;  /* 本文 */
  --c-muted:       #6B6B6B;  /* 補助文・キャプション */
  --c-on-dark:     rgba(248,245,240,0.85); /* 暗背景上の本文 */
  --c-on-dark-mute:rgba(248,245,240,0.5);  /* 暗背景上の補助文 */

  /* セマンティック */
  --c-alert:       #C6927E;  /* 臨時休診・注意喚起(柔らかい赤茶) */
  --c-alert-bg:    #FBEAE2;  /* 注意喚起の背景淡 */
  --c-success:     #7E9479;  /* セージdeepと同(ポジティブ) */

  /* CTA(コンバージョン誘導専用カラー) */
  --c-cta:         #D87C57;  /* テラコッタ(WEB予約・電話予約ボタン) */
  --c-cta-deep:    #B66440;  /* hover時 */
  --c-cta-bg:      #FBEAE2;  /* CTA周辺の柔らかい背景 */

  /* ── 2. タイポグラフィ ─────────────────────────────────── */

  --font-sans:    "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Noto Sans JP", system-ui, -apple-system, sans-serif; /* 見出し:ゴシック統一(weight 600/700で重みづけ) */
  --font-serif:   var(--font-heading); /* ※明朝→ゴシック統一に伴い heading にエイリアス。後方互換維持用 */
  --font-en:      "Inter", system-ui, sans-serif; /* 英字ラベル・年月日 */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* フォントサイズ(rem換算しやすいよう px ベース) */
  --fs-xs:    11px;  /* 英字ラベル・補助 */
  --fs-sm:    12px;  /* タグ・ボタン文字・キャプション */
  --fs-base:  14px;  /* 本文(下層ページ) */
  --fs-md:    15px;  /* 本文(ヒーロー周り) */
  --fs-lg:    16px;  /* リード文 */
  --fs-xl:    18px;  /* 小見出し */
  --fs-2xl:   22px;  /* h3 */
  --fs-3xl:   clamp(26px, 3vw, 34px);  /* セクション見出し h2 */
  --fs-4xl:   clamp(28px, 4.5vw, 46px); /* ヒーロー h1 */
  --fs-hero-mega: 200px; /* 装飾用の超巨大文字 */

  --lh-tight:  1.5;
  --lh-base:   1.9;
  --lh-loose:  2.1;

  --ls-tight:  0.03em;  /* 本文 */
  --ls-base:   0.05em;
  --ls-wide:   0.1em;
  --ls-wider:  0.15em;
  --ls-widest: 0.2em;
  --ls-mega:   0.3em;   /* 英字ラベル(SECTION LABEL) */

  /* ── 3. 余白(8の倍数ベース) ──────────────────────────── */

  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-14:   56px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   100px;
  --sp-28:   110px;  /* セクション縦パディング */

  /* ── 4. レイアウト ─────────────────────────────────────── */

  --container-max:  1200px;
  --container-narrow: 1000px;
  --container-text: 800px;
  --container-pad-x: 36px;
  --container-pad-x-sm: 24px;

  /* ── 5. 角丸(案Cはほぼ角張り、円形のみ使用) ────────── */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-pill:  999px;
  --radius-circle:50%;

  /* ── 6. ボーダー ───────────────────────────────────────── */
  --bd-thin:   1px solid var(--c-line);
  --bd-sage:   1px solid var(--c-sage);
  --bd-navy:   1px solid var(--c-navy);
  --bd-accent: 3px solid var(--c-sage-deep);

  /* ── 7. 影(極控えめ・北欧トーン) ────────────────────── */
  --shadow-none:   none;
  --shadow-card:   0 2px 12px rgba(46, 72, 88, 0.06);
  --shadow-hover:  0 6px 24px rgba(46, 72, 88, 0.10);
  --shadow-cta:    0 4px 14px rgba(216, 124, 87, 0.35); /* CTAボタン用 */
  --shadow-cta-hv: 0 6px 20px rgba(216, 124, 87, 0.50); /* CTA hover */

  /* ── 8. トランジション ─────────────────────────────────── */
  --t-fast:   0.15s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.3s ease;

  /* ── 9. z-index 階層 ───────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  50;
  --z-overlay: 80;
  --z-modal:   100;

  /* ── 10. ブレークポイント(参考値・@media内で利用) ──── */
  /* sm: 640px / md: 768px / lg: 900px / xl: 1100px */
}