/*
 * Design Tokens — thai-massage
 * Spec: DESIGN.md §2-§5 (warm-brown スパ系トークン)
 *
 * 全コンポーネント CSS が参照する共通変数。
 * --color-primary 等は packages/color-palettes/ から動的注入される
 *   (palette-injector が <style id="palette-tokens"> で別途上書きする)。
 *   ここで定義する値は warm-brown 既定 (顧客が未選択のときの fallback)。
 *
 * 禁則:
 *   - CSS color のハードコードは本 :root の token 定義のみ許可。
 *     各コンポーネント CSS は必ず var(--color-*) 経由で参照する。
 *   - rgba() 直書きも本 :root の token 定義のみ (overlay / shadow 用に token 化)。
 *   - Palsea --brand-* トークン使用禁止 (顧客 HP 専用テンプレのため)。
 */

:root {
  /* ──────────────────────────────────────────────
   * カラー (DESIGN.md §2 / palette-injector がオーバーライドする想定)
   *   --color-primary 等は packages/color-palettes/ から動的注入
   * ────────────────────────────────────────────── */

  /* ブランドアクセント (顧客選択パレットで上書き) */
  --color-primary: #8B6F4E;          /* mocha brown 既定 */
  --color-primary-dark: #6E5639;
  --color-primary-light: #A88B68;
  --color-accent: #C9A96A;           /* gold アクセント (見出し装飾・区切り) */

  /* テキスト */
  --color-text: #3D2B1F;             /* 本文 (ダークブラウン) */
  --color-text-secondary: #6B5B4E;
  --color-text-tertiary: #9B8E82;
  --color-text-on-dark: #FBF7F1;     /* 暗背景の上 */
  --color-text-on-dark-sub: #D8CCBE;

  /* 背景 (DESIGN.md §2: リッチブラウン寄り — 深ブラウン + クリーム + gold) */
  --color-bg-main: #FDFAF6;          /* warm cream */
  --color-bg-section-alt: #F3ECE1;   /* 交互背景 (クリームをわずかに濃く・温かみ強化) */
  --color-bg-dark: #241A13;          /* フッター / ダーク帯 (より深いリッチブラウン) */
  --color-bg-overlay: rgba(36, 26, 19, 0.48); /* ヒーロー画像オーバーレイ (深ブラウン基調) */

  /* オーバーレイ / テキストシャドウ / 半透明サーフェス
     (rgba 直書きを禁止するため token 化。リッチブラウン系の深い暗色 (36,26,19) を基調に
      用途/濃度で命名し、コンポーネント間の結合を避ける。--color-bg-dark と同系で統一) */
  --color-overlay-hero-top: rgba(36, 26, 19, 0.32);
  --color-overlay-hero-bottom: rgba(36, 26, 19, 0.62);
  --color-text-shadow-hero: rgba(36, 26, 19, 0.55);
  --color-text-shadow-hero-sub: rgba(36, 26, 19, 0.50);
  --color-surface-translucent: rgba(253, 250, 246, 0.95); /* cream 95% (header / sidebar) */
  --color-overlay-light: rgba(36, 26, 19, 0.20);          /* page-header グラデ上端 */
  --color-overlay-header-top: rgba(36, 26, 19, 0.30);     /* header スクロール前グラデ上端 */
  --color-overlay-strong: rgba(36, 26, 19, 0.52);         /* gallery / portfolio ホバー overlay */
  --color-overlay-white-subtle: rgba(251, 247, 241, 0.10);/* 透過ボタン背景 (on-dark) */
  --color-shadow-subtle: rgba(36, 26, 19, 0.05);          /* 小さい影 (header / hover) */
  --color-shadow-soft: rgba(36, 26, 19, 0.08);            /* カード持ち上げ影 */

  /* ボーダー */
  --color-border: #E5DACB;
  --color-border-light: #F0E9DF;

  /* アクセサリ */
  --color-star: #C9A96A;             /* 星評価 (gold) */

  /* セマンティック: required (必須) バッジ。contact-form 流用のため定義 */
  --color-required-bg: #F2E4D7;
  --color-required-text: #A8543A;

  /* セマンティック: success (送信完了バナー)。ブランド非依存の汎用グリーン。 */
  --color-success-bg: #F0FAF4;
  --color-success-border: #6FCF97;
  --color-success-text: #1A6B3C;

  /* ──────────────────────────────────────────────
   * タイポグラフィ (DESIGN.md §3)
   * ────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', serif;   /* 装飾英字 (MENU / VOICE 等) */
  --font-body: 'Noto Sans JP', sans-serif;        /* 本文 */
  --font-serif-jp: 'Noto Serif JP', serif;        /* 見出し和文 (上質感) */
  /* hydrogen 互換エイリアス (一部 partial が --font-vertical を参照する場合の保険) */
  --font-vertical: 'Noto Serif JP', serif;

  /* Display スケール (英字装飾) */
  --fs-display-xl: 48px;
  --fs-display-lg: 36px;
  --fs-display-md: 28px;
  --fs-display-sm: 18px;

  /* Heading */
  --fs-heading-xl: 32px;
  --fs-heading-lg: 24px;
  --fs-heading-md: 20px;
  --fs-heading-sm: 16px;

  /* Body */
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-caption: 11px;

  /* tracking / line-height */
  --tracking-wide: 0.15em;
  --tracking-wider: 0.2em;
  --tracking-widest: 0.3em;

  --lh-heading: 1.5;
  --lh-body: 1.9;   /* hydrogen より広め (ゆとり表現・DESIGN.md §3) */
  --lh-tight: 1.2;

  /* ──────────────────────────────────────────────
   * レイアウト (DESIGN.md §4)
   * ────────────────────────────────────────────── */
  --section-padding-y: 96px;
  --section-padding-y-mobile: 64px;

  --container-max-width: 1200px;
  --container-padding-x: 32px;
  --container-padding-x-mobile: 16px;

  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 32px;
  --gap-xl: 48px;
  --gap-2xl: 64px;
  --gap-3xl: 96px;

  --sidebar-width: 0px;
  /* 3段ヘッダー（タグライン帯 + ロゴ+SNS行 + 横帯ナビ行）の各段高さ（header.css が参照）。 */
  --header-tagline-h: 32px;
  /* ロゴ2倍化に伴いブランド帯を拡張（旧 72px）。ロゴ高さは --site-logo-h で独立制御。 */
  --header-brand-h: 104px;
  --header-nav-h: 52px;
  /* ヘッダーロゴ画像の高さ（旧実効 48px の2倍）。横幅は object-fit:contain で自動。 */
  --site-logo-h: 96px;
  --site-logo-h-mobile: 80px;
  /* 固定ヘッダー実高 = 3段合計（≈156px）。下層ページの上部オフセット/scroll-margin はこれを基準にする。 */
  --header-height: calc(var(--header-tagline-h) + var(--header-brand-h) + var(--header-nav-h));
  --header-padding-x: 32px;

  /* ──────────────────────────────────────────────
   * アニメーション (DESIGN.md §5)
   * ────────────────────────────────────────────── */
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
  --duration-extra-slow: 1.5s;
}

* {
  box-sizing: border-box;
}

html {
  /* アンカーリンクのスムーズスクロール (about ページの #concept/#room/#access 等) */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-main);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}