/* ホテルしみず — デザイントークン。TOKENS.md 第4版の値をそのまま反映 */
:root {
  /* 1.1 色 (単色トークン) */
  --c-paper: #FCFAF6;
  --c-surface: #FFFFFF;
  --c-mist: #F1ECE4;
  --c-line: #D8D1C6;
  --c-ink: #1F1D1B;
  --c-ink-2: #5B564F;
  --c-ink-3: #666059;
  --c-navy: #1E3A5F;
  --c-navy-hover: #162C48;
  --c-navy-tint: #E4ECF5;
  --c-gold: #996B25;        /* ロゴの金（2026-09-23 支給ロゴから採色）。飾りの線・小物だけに使う */
  --c-cta: #B8420B;
  --c-cta-hover: #933407;
  --c-link: #1F4E8C;
  --c-visited: #5B3F8C;
  --c-footer-bg: #1C1A18;
  --c-footer-fg: #F2EEE8;
  --c-footer-muted: #BDB6AC;
  --c-footer-line: rgba(242,238,232,.15);
  --c-focus: #1A73E8;
  --c-focus-dark: #FFD166;
  --c-warn-bg: #FFF4E0;
  --c-warn-fg: #7A3E00;
  --c-price-bg: #FBEFE6;
  --c-price-fg: #7A2C07;
  --c-disabled-bg: #E9E4DC; /* 予備。現状使用箇所なし */
  --c-disabled-fg: #625D55; /* 予備。現状使用箇所なし */
  --c-success: #2E6B3A; /* 予備 */
  --c-white: #FFFFFF;

  /* 2. タイポグラフィ */
  --ff-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans CJK JP", system-ui, sans-serif;
  --ff-display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif CJK JP", serif;

  --fs-display: clamp(1.875rem, 1.382022rem + 2.022472vw, 3rem);
  --fs-display-desc: 1.125rem;
  --fs-h1: clamp(1.625rem, 1.241573rem + 1.573034vw, 2.5rem);
  --fs-h2: clamp(1.375rem, 1.101124rem + 1.123596vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.015449rem + 0.449438vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 0.980337rem + 0.337079vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-num: clamp(1.375rem, 1.210674rem + 0.674157vw, 1.75rem);

  --lh-body: 1.8;
  --lh-table: 1.6;
  --lh-lead: 1.7;
  --lh-h3: 1.5;
  --lh-heading: 1.45;
  --lh-h1: 1.4;
  --lh-display: 1.3;
  --lh-ui: 1.4;
  --lh-num: 1.4;

  --ls-body: 0.02em;
  --ls-heading: 0.04em;
  --ls-display: 0.04em;
  --ls-h3: 0.02em;
  --ls-eyebrow: 0.14em;

  --measure-prose: 40em;
  --measure-lead: 36em;
  --measure-min: 18em;
  --list-min: 9rem;

  /* 3. 余白 (段階値。<768 の既定値。768/1024/1280 は下の @media で再定義) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-4b: 20px; --sp-5: 24px;
  --sp-6: 32px; --sp-6b: 40px; --sp-7: 48px; --sp-8: 64px; --sp-8b: 72px; --sp-9: 96px;

  --sec-pad-y: 40px;
  /* 下層ページの面と面の間隔。2026-09-23 に 32/40/48 → 40/56/72px へ。
     トップ（面ごとに 85〜150px）に比べて下層が詰まり、事務的に見えていたため */
  --sec-gap: 40px;
  --sec-head-gap: 24px;
  --page-hero-pad-y: 24px;
  --page-hero-min: 0px;   /* 下層の冒頭パネルの高さの基準（下限）。C-08 */
  --card-pad: 20px;
  --card-pad-rooms: 20px;
  --cell-pad-y: 12px;
  --cell-pad-x: 16px;
  --hero-content-pad-y: 24px;
  --hero-media-pad-y: 0px;
  --facts-pad-y: 16px;
  --grid-gap: clamp(16px, 2.5vw, 32px);
  --hero-media-h: 180px;

  /* 4. レイアウト */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --header-h-real: 112px; /* JS 未計測時のフォールバック (36 utility + 72 本体 + 4) */
  --sticky-h: 56px;
  --sticky-h-real: var(--sticky-h);
  --btn-h: 48px;
  --z-header: 100; --z-sticky: 150; --z-drawer: 200; --z-skip: 300;

  /* 5. 形・影 */
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-2: 0 8px 24px rgba(31,29,27,.10);

  /* 6. モーション */
  --dur-1: 150ms;
  --dur-2: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root {
    --hero-media-h: 400px;
    --sec-gap: 56px;
    --page-hero-pad-y: 32px;
    --page-hero-min: 20rem;   /* 導入文3行 + ページ内リンク1段が収まる高さ（768px で実測 315px）*/
    --card-pad: 24px;
    --cell-pad-y: 16px;
    --hero-content-pad-y: 32px;
    --hero-media-pad-y: 24px;
    --facts-pad-y: 24px;
    --header-h: 64px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hero-media-h: 430px;
    --header-h: 72px;
    --sec-pad-y: clamp(40px, 5vw, 72px);
    --sec-gap: 72px;
    --sec-head-gap: 32px;
    --page-hero-pad-y: 40px;
    --page-hero-min: 22rem;   /* 同（1024〜1440px で実測 341〜351px）*/
    --cell-pad-x: 24px;
  }
}