/* ============================================================
   おはな犬猫治療院 — 共通デザインシステム (design-system.css)
   ------------------------------------------------------------
   トップページ(index.html)を正典とした、全ページ共通の配色ルール。
   各ページの <head> 内で、そのページ独自の <style> より「後」に読み込むこと。
   （CSSは後勝ちのため、ページ側の :root トークンをこのファイルが上書きし、
     全ページで「同じサイト」と感じられる世界観に統一する）

   使い方:  </head> の直前に次の1行を追加するだけ
     <link rel="stylesheet" href="design-system.css">
   ============================================================ */

:root {
  /* --- ブランドカラー（正典 = トップページ）--- */
  --green:        #164441;   /* 基調グリーン：本文・見出し */
  --green-m:      #2D5E59;
  --amber:        #7A6440;   /* アクセント・枠線・番号（A11y対応の濃いアンバー）*/
  --muted:        #4D7571;   /* 補助テキスト */
  --text:         #164441;

  /* --- 背景：フラット（ミント / ベージュ）。濃緑ベタ塗り・強いグラデーションは廃止 --- */
  --mint:         #ACE0DC;
  --beige:        #FBEEE4;
  --card:         #ffffff;

  /* --- CTA：オレンジを廃止し、アンバーに統一 --- */
  --cta:          #7A6440;
  --cta-d:        #5F4E30;
  --cta-orange:   #7A6440;   /* 旧オレンジ(#E85D25)をアンバーへ上書き */
  --cta-orange-d: #5F4E30;   /* 旧オレンジ濃(#C74E1D)をアンバー濃へ上書き */

  /* --- 枠線・影（白カード＋角丸＋淡い影）--- */
  --bd:           rgba(148,122,85,.55);
  --line:         rgba(148,122,85,.32);
  --shadow-card:  0 16px 40px -28px rgba(22,68,65,.28);
}

/* ============================================================
   フッター：濃い緑ベタ塗りを廃止し、ミント背景＋アンバー枠線に統一。
   （このファイルは各ページで最後に読まれるため、!important で上書き）
   文字色は濃い緑ベースの薄い白→ミント上で読めるグリーン/ミュートへ。
   ============================================================ */
footer {
  background: var(--mint) !important;
  border-top: 1px solid var(--bd) !important;
}
/* フッター内テキスト：濃色で可読性を確保（2種のマークアップ構成に両対応）*/
footer .footer-logo,
footer .footer-logo .ja { color: var(--green) !important; }
footer .footer-logo .en,
footer .footer-sub,
footer .footer-copy,
footer .footer-info { color: var(--muted) !important; }
footer .footer-info a { color: var(--green) !important; }
footer .footer-logo img { opacity: .9 !important; }

/* ============================================================
   濃い緑の帯を廃止 ── 最終CTA帯(.final-cta)をミント背景に。
   白文字だった見出し・本文を濃色へ作り直す。ボタンは色付きなので流用。
   ============================================================ */
.final-cta {
  background: var(--mint) !important;
  border-top: 1px solid var(--bd) !important;
}
.final-cta h2 { color: var(--green) !important; }
.final-cta p  { color: var(--muted) !important; }

/* ============================================================
   濃い緑のCTA帯(.cta-section)をミント背景に。白文字→濃色へ。
   ダーク前提の白アウトラインボタン・白区切り線もアンバー系へ。
   ============================================================ */
.cta-section {
  background: var(--mint) !important;
  border-top: 1px solid var(--bd) !important;
}
.cta-section .cta-title { color: var(--green) !important; }
.cta-section .cta-desc  { color: var(--muted) !important; }
/* ダーク前提の白アウトラインボタン → アンバー枠線＋グリーン文字 */
.btn-outline {
  border-color: var(--bd) !important;
  color: var(--green) !important;
}
.btn-outline:hover { border-color: var(--amber) !important; background: rgba(122,100,64,.06) !important; }
/* フッター内 提携ブロックの白い区切り線 → アンバー系ライン */
.footer-affil { border-top-color: var(--bd) !important; }
/* 「トップへ戻る」丸ボタンも濃い緑を廃止しアンバーへ */
.back-to-top { background: var(--amber) !important; }

/* 症例ページの締めボックス(.senior-closing)：濃緑グラデ→白カード＋アンバー枠線 */
.senior-closing {
  background: #fff !important;
  border: 1px solid var(--bd) !important;
}
.senior-closing p { color: var(--green) !important; }

/* ============================================================
   グラデ帯の廃止 ── トップページのトークンを正典として流用。
   トップページと同じ値のみ使用（新しい色・新しいグラデは作らない）。
   内容セクションのグラデ背景・濃緑ヒーロー副パネルはフラット化。
   ============================================================ */
:root {
  /* トップページ(index.html)の :root からそのまま流用 */
  --beige: linear-gradient(180deg,#FEF6F0 0%,#FBEEE4 100%);
  /* サブページのグラデ帯は全てベージュにフラット化（トップと同じ値のみ使用）。
     ※トップページ(index.html)はこのCSSを読み込まないため、Heroのミントグラデは維持される */
  --gradient-hero: linear-gradient(180deg,#FEF6F0 0%,#FBEEE4 100%);
  --gradient-soft: linear-gradient(180deg,#FEF6F0 0%,#FBEEE4 100%);
  --cream: #FDF0E8;
  --stone: #CBECF2;
}
/* 念のためインライン指定のグラデ帯も明示的にフラット化 */
section[style*="gradient-hero"],
section[style*="gradient-soft"],
.chain-section { background: var(--beige) !important; }
/* 濃緑のヒーロー副パネル → クリームへ（緑・ミントは使わない。ボックスは白すりガラス＋アンバー左アクセント）*/
.hero-right { background: linear-gradient(160deg, #FDF6F0 0%, #F5EBE0 100%) !important; }
/* 水色(green-l/mint)の強調ボックス → 画像2(.case-insight)風の「白＋アンバー枠＋左アクセント」に統一 */
.chain-box-good,
.analysis-highlight {
  background: #fff !important;
  border: 1px solid var(--bd) !important;
  border-left: 3px solid var(--amber) !important;
}
/* 症例カード：ヘッダーの水色→白、カードの箱枠線＝アンバー */
.case-card   { border-color: var(--bd) !important; }
.case-header {
  background: #fff !important;
  border-bottom: 1px solid var(--bd) !important;
}
.case-header .case-title    { color: var(--green) !important; }
.case-header .case-subtitle { color: var(--muted) !important; }
.case-header .case-tag      { color: var(--green) !important; border-color: var(--bd) !important; }
/* チェックボックス・症状タグの枠線 → アンバー */
.hero-meta-item { border-color: var(--bd) !important; }
.symptom-pill   { border-color: var(--bd) !important; }

/* 濃緑の主要ボタン（primary / submit）→ トップと同じアンバーCTAに統一 */
.btn-primary, .btn-submit { background: var(--cta) !important; }
.btn-primary:hover, .btn-submit:hover { background: var(--cta-d) !important; }

/* ============================================================
   タイポグラフィ・スケール（トップページの実寸を正典に）
   ── ページ側で font-size を個別指定せず、この変数だけを使う方針。
      サブページの独自サイズをトップの階層へ上書き統一する。
   ============================================================ */
:root {
  --fs-h1:      clamp(21px,4.2vw,36px);   /* ヒーロー大見出し（トップ .hero h1）*/
  --fs-h2:      clamp(23px,3vw,33px);     /* セクション見出し（トップ h2）*/
  --fs-h3:      clamp(18px,2.2vw,22px);   /* 小見出し（トップ .why-box h3）*/
  --fs-lead:    clamp(15px,1.6vw,18px);   /* リード文 */
  --fs-body:    16px;                     /* 本文 */
  --fs-small:   clamp(13.5px,1.5vw,15px); /* 補足本文 */
  --fs-label:   13px;                     /* 英語ラベル / eyebrow */
  --fs-caption: 12px;                     /* キャプション */
  --lh-heading: 1.6;
  --lh-body:    1.9;
  --lh-small:   1.7;
}
.hero-title, .page-hero-title      { font-size: var(--fs-h1) !important; line-height: 1.7 !important; }
.section-heading, .cta-title,
.final-cta h2                      { font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; }
.section-label-text                { font-size: var(--fs-label) !important; }
.intro-lead, .section-sub,
.hero-lead                         { font-size: var(--fs-lead) !important; line-height: var(--lh-body) !important; }
.body-text                         { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; }
