/* theme.css — 理由書ナビ LP のトークン(値だけ)
   世界観3語: 清潔・誠実・手早い / 視覚的メタファー: 罫線の紙に書類が整う
   明基調(清潔・日中)。色はアプリと同じブランド色に合わせる(LP・1枚資料・動画・アプリで同じ印象に) */
:root {
  /* ── 基調色 ── */
  --bg-base:    #f4f8fa;   /* 最背面(ごく淡い寒色の紙) */
  --c-surface:  #ffffff;   /* 白い面 */
  --c-tint:     #e9f2f6;   /* 淡い紺の面(セクションの交互・アプリの選択色と同じ系統) */
  --c-text:     #1f2a30;   /* 本文 白地で約14:1 */
  --c-text-sub: #46545c;   /* 補足 白地で約7.9:1 */
  --c-text-inv: #ffffff;   /* 紺の面の上の文字 紺地で約7.4:1 */
  --c-line:     #d4dfe5;   /* 罫・枠 */
  --c-header:   rgba(255, 255, 255, 0.96);  /* 固定のヘッダー(下の内容がわずかに透ける白) */
  --c-chrome:   #f7fafb;   /* 画面の枠の上端(画像の額縁) */
  --c-chrome-dot: #cfdbe1;
  --c-deep:     #0b2e3d;   /* フッター・動画の下地(紺の最も暗い段) */
  --c-deep-text: #e3edf2;  /* 深い紺の上の文字 約12:1 */
  --c-deep-sub:  #c5d6de;  /* 深い紺の上の補足 約9.6:1 */

  /* ── アクセント(ブランド色1つ+同色相の暗い段) ── */
  --c-accent:      #0f5c7a;  /* ブランドの紺。白地の文字で約7.4:1 */
  --c-accent-deep: #0b465d;  /* 押したとき・ホバー */
  /* 温かみ(1か所だけ: 無料モニターの面)。アプリのロゴの印と同じ色。文字には使わず、文字は暗い段で */
  --c-warm:        #d08a3a;
  --c-warm-tint:   #fbf1e4;
  --c-warm-deep:   #7d4a10;  /* 淡い面の上の文字 約6.4:1 */

  /* ── 背景表現(静的): 罫線の紙 ── */
  --rule-line: rgba(15, 92, 122, 0.07);
  --scrim: rgba(255, 255, 255, 0);
  --bg-opacity: 1;

  /* ── タイポグラフィ(すべて端末の書体。外部から読み込まない) ── */
  --f-body: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --f-display: var(--f-body);
  --f-label: var(--f-body);
  --f-num: var(--f-body);

  /* 和文の7段(toolkit/jp-type-scale.md)。この階段以外を使わない
     例外: ロゴの文字(--fs-logo)と電話番号の特大表示(--fs-tel)だけ。これ以外を増やさない */
  --fs-logo:    1.375rem;
  --fs-label:   0.75rem;
  --fs-caption: 0.875rem;
  --fs-ui:      0.9375rem;
  --fs-body:    1.0625rem;
  --fs-h4:      1.25rem;
  --fs-title:   clamp(1.75rem, 3.6vw, 2.375rem);
  --fs-hero:    clamp(1.875rem, 3.4vw, 2.75rem);  /* 「長期・頻回施術継続」9字が左の列(1440pxで約430px)に1行で収まる大きさ */
  --fs-tel:     clamp(1.5rem, 3vw, 2rem);
  --lh-body:    1.9;   /* 和文本文(プロジェクトの上書き: 和文の密度のため 1.8 を超える) */
  --lh-heading: 1.45;

  /* ── 余白リズム ── */
  --sec-pad: clamp(72px, 9vw, 128px);
  --block-gap: clamp(40px, 5vw, 64px);
  --max-w:   1160px;
  --pad-x:   clamp(20px, 5vw, 56px);
  --radius:  12px;
  --radius-s: 8px;
  --shadow-card: 0 1px 2px rgba(16, 42, 54, 0.06), 0 16px 36px -18px rgba(16, 42, 54, 0.28);
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ── フォーカスリング ── */
  --focus-ring: #0f5c7a;
  --focus-halo: rgba(255, 255, 255, 0.9);
}