/*
 * 基盤レイヤー: デザイントークン + 最小リセット
 *
 * Bootstrap 廃止（Issue #695）に伴い、全ページが前提とするトークン定義と
 * Reboot 相当の最小リセットをこのファイルに集約する。
 * 値は移行前の見た目を維持するため Bootstrap 5.3 の既定値に合わせている。
 *
 * ブレークポイント規約（メディアクエリでは CSS 変数を使えないため直値で記述する）:
 *   sm: 576px / md: 768px / lg: 992px / xl: 1200px
 */

:root {
  --mobile-footer-height: 48px;
  --mobile-footer-main-gap: 0px;
  --mobile-footer-action-gap: 16px;
  --mobile-safe-area-offset: env(safe-area-inset-bottom);
  --mobile-footer-main-offset: calc(
    var(--mobile-footer-height) + var(--mobile-footer-main-gap) + var(--mobile-safe-area-offset)
  );
  --mobile-footer-action-offset: calc(
    var(--mobile-footer-height) + var(--mobile-footer-action-gap) + var(--mobile-safe-area-offset)
  );

  /* ── デザイントークン（LP由来の白基調） ── */

  /* フォントファミリー */
  --font-family-base:
    "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;

  /* スペーシングスケール（ユーティリティクラスの基準値） */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  /* アクセントカラー（ゴールドブラウン） */
  --color-accent: #b78f59;
  --color-accent-hover: #a7814d;
  --color-accent-light: #c9a75a;
  --color-accent-muted: #9d7743;
  --color-accent-focus: rgba(183, 143, 89, 0.45);
  --color-accent-shadow: rgba(183, 143, 89, 0.25);
  --color-accent-pale: #f0dfc0;
  --color-accent-pale-soft: #f6ecd9;
  /* ボタン専用アクセント（アクセントカラーを参照） */
  --color-accent-btn: var(--color-accent);
  --color-accent-btn-hover: var(--color-accent-hover);
  --color-accent-btn-focus: var(--color-accent-focus);

  /* テキストカラー */
  --color-text-primary: #2f2a22;
  --color-text-secondary: #4d463d;
  --color-text-brand: #3f382f;
  --color-text-dark: #212529;
  --color-text-muted: #6c757d;
  --color-text-subtle: #555555;
  --color-text-faint: #888888;

  /* リンクカラー（ブランドアクセント色。Issue #770 でゴールド系へ統一） */
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);

  /* 背景カラー */
  --color-bg-white: #ffffff;
  --color-bg-warm: #fcf8f2;
  --color-bg-subtle: #f7f7f7;
  --color-bg-light: #f2f2f2;
  /* 映像プレイヤー等、黒地が必要な領域専用（ページ全体の白基調とは別トーン） */
  --color-bg-black: #000000;

  /* ホバー/フォーカス時の背景（白地のインタラクティブ要素専用） */
  --color-bg-hover: var(--color-bg-warm);
  --transition-hover: opacity 0.15s ease;
  --opacity-hover: 0.75;

  /* ボーダー */
  --color-border: #e6e6e6;
  --color-border-faint: #ebebeb;
  --color-border-medium: #cfcfcf;
  --color-border-light: #dddddd;
  --color-border-muted: #6c757d;
  /* フォーム入力（input/select/textarea）の枠線 */
  --color-border-input: #dee2e6;
  /* コンポーネント既定の半透明ボーダー（カード・ドロップダウン等） */
  --color-border-translucent: rgba(0, 0, 0, 0.175);

  /* 削除アクション（くすんだ赤）*/
  --color-danger-muted: #a85252;
  --color-danger-muted-hover: #8f3f3f;

  /* 通知・強調（未読バッジ等） */
  --color-danger: #dc3545;

  /* ライブバッジ */
  --color-live-badge: #dc2626;

  /* ルームステータス */
  --color-status-inactive: #e3eef2;
  --color-status-upcoming: #fff1d6;
  --color-status-active: #dff3ea;
  --color-status-closed: #ececec;

  /* いいね済みハート */
  --color-heart-liked: var(--color-accent-light);

  /* シャドウ */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-cta: 0 10px 24px rgba(83, 61, 30, 0.22);
  --shadow-cta-hover: 0 14px 30px rgba(83, 61, 30, 0.28);

  /* ボーダー半径 */
  --radius-card: 12px;
  --radius-btn: 12px;
  --radius-btn-lg: 14px;
  --radius-pill: 9999px;
  /* コンポーネント既定の半径（ボタン・フォーム・ドロップダウン等） */
  --radius-base: 0.375rem;

  /* タイポ：フォントサイズ（LP固有値） */
  --font-size-eyebrow: 0.85rem;
  --font-size-nav: 0.9rem;
  --font-size-title-sm: 1.2rem;
  --font-size-title: 1.3rem;
  --font-size-hero: 1.9rem;

  /* タイポ：行間（base=1.5/sm=1.25/lg=2 の中間値） */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.9;

  /* タイポ：字間 */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.12em;
}

/* ── 最小リセット ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-dark);
  background-color: var(--color-bg-white);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  font-size: calc(1.375rem + 1.5vw);
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.5rem;
  }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

img,
svg {
  vertical-align: middle;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

textarea {
  resize: vertical;
}