/* SITE 110 LOUNGE PRIVATE ROOM — design tokens
   配色: ダークブラウン #211B18 / アイボリー #F0E7D9 / ブラス #A78752 / ワイン #5B2D38
   角丸は 6px の1種類のみ（0 = 角丸なし）。影は2段階まで。 */
:root {
  /* --- color --- */
  --brown:       #211B18;
  --brown-deep:  #160F0D;
  --surface:     #2B231F;
  --surface-2:   #362C26;
  --ivory:       #F0E7D9;
  --brass:       #A78752;
  --brass-light: #D3B685; /* 小さめ文字・リンク用（brown 上で 8.6:1） */
  --wine:        #5B2D38;
  --wine-light:  #C77F92; /* 注意色・バッジ用 */

  --text:        var(--ivory);
  --text-muted:  #CBBFAE; /* brown 上で 8.9:1 */
  --text-note:   #A99C8A; /* 注記用 brown 上で 6.3:1 */
  --line:        rgba(240, 231, 217, 0.16);
  --line-strong: rgba(240, 231, 217, 0.30);
  --focus:       #D3B685;

  --ok:      #8FBF9B;
  --warn:    #D89A6A;

  /* --- type --- */
  --font-en: "Playfair Display", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, serif;
  --font-ja: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --fs-body:  1rem;      /* 16px */
  --fs-lead:  1.0625rem; /* 17px */
  --fs-note:  0.875rem;  /* 14px — 下限 */
  --fs-h1:    clamp(1.75rem, 1.05rem + 2.8vw, 2.875rem);
  --fs-h2:    clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem);
  --fs-h3:    clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);

  --lh-body: 1.75;
  --lh-tight: 1.32;

  /* --- space --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* --- layout --- */
  --wrap: 1200px;
  --gutter: 20px;
  --header-h: 72px;
  --ctabar-h: 56px;   /* 48〜56px の範囲。safe-area は .cta-bar 側で加算する */
  /* .confirm-panel 等が固定CTA・kyabel-promoバナーの下に隠れないための余白（実測目安190px） */
  --confirm-scroll-pad: 190px;

  /* --- shape --- */
  --radius: 6px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.5);

  /* --- motion（1種類: fade-up のみ） --- */
  --dur: 480ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 80px; --gutter: 32px; }
}

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