/* SITE 68 — HOST CLEAN WHITE / design tokens
   配色（担当仕様）: ホワイト #FCFCFD / アイスグレー #E9EDF2 / ネイビー #1E293B / ブルー #4D7CFF
   角丸は 12px のみ（MASTER §8: 1サイト内で混在させない。SITE 67 の 8px とは変える）
   影は 2段階まで。明色のため影は薄く、面の区切りは罫線と背景差で作る。
   本文16px / 注記14px を最小値とする。

   コントラストの扱い（design-guide.md §6 / 4.5:1）
   - 指定色の #4D7CFF は白地に対して 3.7:1 のため、本文サイズの文字と
     白抜きボタンの下地には使わない。装飾・罫線・24px以上の数字に限定する。
   - 文字・ボタン下地には #2F5FE0（白地 5.5:1 / 白文字 5.5:1）を使う。 */
:root {
  /* --- 面 --- */
  --c-bg: #FCFCFD;         /* ページ地 */
  --c-bg-2: #F3F6FA;       /* section--alt / カード地 */
  --c-bg-3: #E9EDF2;       /* アイスグレー: 表ヘッダ・キー列・タグ地 */
  --c-bg-inset: #FFFFFF;   /* 入力欄・写真枠の内側 */

  /* --- 罫線 --- */
  --c-line: #DFE5EE;
  --c-line-strong: #C3CCDA;

  /* --- 文字 ---
     コントラストは最も暗い面 --c-bg-3 (#E9EDF2) を基準に検証する。
     ページ地 #FCFCFD だけで検証すると、section--alt (#F3F6FA) や
     アイスグレー地に置いた注記が 4.5:1 を割る。
     #1E293B = 14.3:1 / 12.6:1、#475569 = 7.3:1 / 6.4:1、
     #5E6B82 = 5.25:1（#FCFCFD）/ 4.97:1（#F3F6FA）/ 4.58:1（#E9EDF2）。 */
  --c-fg: #1E293B;
  --c-fg-2: #475569;
  --c-muted: #5E6B82;

  /* --- アクセント（ブルー1色 + 状態色） --- */
  --c-accent: #4D7CFF;             /* 装飾・罫線・大きな数字（24px以上）専用 */
  --c-accent-strong: #2F5FE0;      /* 文字・ボタン下地（4.5:1 以上を満たす） */
  --c-accent-deep: #2249BC;        /* hover / 押下 */
  --c-accent-on: #FFFFFF;          /* accent-strong の上に載る文字 */
  --c-accent-soft: #EDF2FF;        /* 淡い面 */
  --c-accent-line: #B9CBFF;

  --c-ok: #0F7A4E;      /* 営業中・出勤あり（5.2:1） */
  --c-off: #94A3B8;     /* 休業・出勤なし（ドットのみ。文字には使わない） */
  --c-alert: #C2261A;   /* エラー・注意（5.7:1） */
  --c-focus: #2F5FE0;

  /* --- 角丸（12px 単一） --- */
  --radius: 12px;

  /* --- 影（2段階。明色なので薄く） --- */
  --shadow-1: 0 1px 2px rgba(30, 41, 59, 0.06);
  --shadow-2: 0 16px 40px rgba(30, 41, 59, 0.16);

  /* --- 寸法（担当仕様: 本文は1120px） --- */
  --w-page: 1120px;
  --w-text: 720px;
  --h-header: 68px;
  --h-cta: 58px;
  --tap: 44px;

  /* --- 余白（セクション間は広め） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 104px;

  /* --- 文字サイズ（最小14px） --- */
  --fs-note: 14px;   /* 注記・補足 */
  --fs-body: 16px;   /* 本文・料金・時刻・住所・ラベル */
  --fs-lead: 17px;
  --fs-h4: 18px;
  --fs-h3: 21px;
  --fs-h2: clamp(24px, 2.4vw, 30px);
  --fs-h1: clamp(28px, 3.6vw, 40px);
  --fs-display: clamp(30px, 4.4vw, 46px);

  --lh-tight: 1.34;
  --lh-normal: 1.6;
  --lh-long: 1.78;

  /* --- 書体（担当仕様: Manrope + Noto Sans JP） --- */
  --font-base: "Manrope", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-num: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- モーション（1サイト1種類: fade-up のみ） --- */
  --dur: 380ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-header: 60;
  --z-cta: 70;
  --z-drawer: 90;
  --z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}