/* =============================================================
   HOLY-MOLY LP — Design Tokens
   Source: design.md (Nocturnal Sanctuary) × PCカンプ実測
   ※ [C] = カンプ実測を採用した箇所（design.md と差異あり / §12-B 参照）
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     COLOR — Midnight（キャンバス）
     --------------------------------------------------------- */
  --midnight-900: #0A0220;   /* 最下層・ボタン塗り */
  --midnight-800: #110430;
  --midnight-700: #190640;   /* ★ページ既定背景（実測 #190540 と一致） */
  --midnight-600: #251259;   /* カード等の浮いた面 */
  --midnight-500: #3B2576;
  --midnight-400: #5A4499;

  /* COLOR — Gold（星／アクセント。大面積の塗りには使わない） */
  --gold-700: #807D3D;
  --gold-500: #B0AD56;       /* ★アクセント基準 */
  --gold-400: #C6C37A;       /* ✦マーク・FAQ質問文 */
  --gold-300: #DDDAA8;

  /* COLOR — Silver（月光＝可読性） */
  --silver-300: #E3E7F2;
  --silver-400: #C7CEE0;
  --silver-500: #9AA3BC;

  /* COLOR — Paper / Ink */
  --paper-white: #F5F2EA;
  --ink-dark:    #1A1325;

  /* COLOR — Semantic */
  --c-bg:            var(--midnight-700);
  --c-bg-deep:       var(--midnight-900);
  --c-surface-card:  #F1F4F9;              /* [C] design.md は paper-white #F5F2EA */
  --c-text:          #E9DDFF;              /* on-surface。純白は使わない */
  --c-text-body:     #E9DDFF;
  --c-text-muted:    rgba(233, 221, 255, 0.72);
  --c-text-on-card:  var(--ink-dark);
  --c-accent:        var(--gold-400);
  --c-placeholder:   #DEDEDE;              /* 未確定画像のダミー */
  --c-line-green:    #06C755;              /* LINE ブランド（変更禁止） */

  /* COLOR — Borders / Veils */
  --border-silver:   rgba(227, 231, 242, 0.12);  /* コンテナ既定の輪郭 */
  --border-silver-24:rgba(227, 231, 242, 0.24);  /* ゴーストボタン（Secondary） */
  --border-gold-35:  rgba(176, 173, 86, 0.35);   /* 特集カード */
  --veil-access:     rgba(38, 24, 84, 0.62);     /* アクセス背景写真の覆い */
  --veil-header:     rgba(25, 6, 64, 0.60);      /* ヘッダー（blur 20px と併用） */

  /* COLOR — Button（design.md 準拠。カンプのダーク塗りは採用しない） */
  --c-btn-primary-bg:       var(--gold-500);
  --c-btn-primary-bg-hover: var(--gold-400);
  --c-btn-primary-text:     var(--midnight-900);  /* ✦ マークも同色 */
  --c-btn-secondary-border: var(--border-silver-24);
  --c-btn-secondary-text:   var(--c-text);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --ff-display: "Shippori Mincho B1", "Noto Serif JP", serif;
  --ff-body:    "Noto Serif JP", "Shippori Mincho B1", serif;
  --ff-en:      "Cormorant Garamond", "Noto Serif JP", serif;
  --ff-ui:      "Inter", "Noto Sans JP", sans-serif;

  /* PC（1440px基準）。SP値は §7 のメディアクエリで上書き */
  --fs-h1:      32px;   /* [C] design.md h1 は 48px */
  --fs-h2:      24px;   /* [C] design.md h2 は 28px */
  --fs-h3:      16px;
  --fs-lede:    21px;   /* [C] design.md lede は 18px */
  --fs-body:    16px;
  --fs-nav:     13px;
  --fs-btn:     14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  --lh-display: 1.35;
  --lh-lede:    1.5;    /* [C] design.md lede は 1.9 */
  --lh-body:    2.0;    /* [C] design.md body は 1.75。実測は 32px 送り */
  --lh-tight:   1.2;

  --ls-display: 0.08em;
  --ls-h2:      0.20em; /* [C] design.md h2 は 0.08em */
  --ls-body:    0.04em;
  --ls-eyebrow: 0.18em;

  /* ---------------------------------------------------------
     SPACING — 8px ベースグリッド
     --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-4:  16px;
  --space-6:  32px;
  --space-8:  64px;
  --space-9:  96px;    /* セクション間の既定 */
  --space-10: 128px;

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --container:      1200px;  /* ヘッダー / ヒーロー / お部屋〜アクセス */
  --container-nar:  1100px;  /* FAQ / お問い合わせ / フッター */
  --container-wide: 1280px;  /* アクセスの背景写真バンド */
  --gutter:         24px;
  --gutter-pc:      20px;

  --header-h:       80px;
  --header-h-sp:    60px;
  --section-py:     var(--space-10);  /* 128px。詳細は仕様書 §2 */
  --gap-col:        22px;             /* 2カラム間 */
  --gap-media:      11px;             /* 画像モジュール内 */

  /* ---------------------------------------------------------
     SHAPE — Architectural（既定はシャープ）
     --------------------------------------------------------- */
  --radius-sharp: 0;
  --radius-soft:  4px;   /* 入力欄など */
  --radius-card:  8px;   /* [C] design.md は 4px。カンプは 8px */
  --radius-pill:  9999px;

  /* ---------------------------------------------------------
     DEPTH — Glow / Blur（ドロップシャドウは使わない）
     --------------------------------------------------------- */
  --glow-gold:   0 0 40px rgba(176, 173, 86, 0.25);
  --blur-header: 20px;

  /* MOTION */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    0.25s;
  --dur-reveal:  0.8s;
}

/* =============================================================
   TYPOGRAPHY PRESETS
   ============================================================= */

.t-h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0.06em;
  color: var(--c-text);
}

.t-h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--ls-h2);
  text-indent: var(--ls-h2);   /* letter-spacing による中央ズレを補正 */
  color: var(--c-text);
}

.t-h3 {
  font-family: var(--ff-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}

.t-lede {
  font-family: var(--ff-body);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: var(--lh-lede);
  letter-spacing: 0.06em;
  color: var(--c-text);
}

.t-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-body);
}

.t-caption {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
}

/* 英字ラベル（セクション見出しの下）。Cormorant Garamond */
.t-label-en {
  font-family: var(--ff-en);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.15em;
  color: var(--c-text-body);
}

/* ヒーロー等の小キャップ英字ラベル。Inter */
.t-eyebrow {
  font-family: var(--ff-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text);
}

/* 日本語見出しは必ず palt を有効化（design.md 指定） */
.t-h1, .t-h2, .t-h3, .t-lede {
  font-feature-settings: "palt" 1;
}

/* =============================================================
   SIGNATURE — Horizon Line（両端フェードのゴールド 1px 罫線）
   セクション見出しの下、および主要な区切りに使用
   ============================================================= */

.horizon-line {
  display: block;
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(176, 173, 86, 0) 0%,
    var(--gold-500) 50%,
    rgba(176, 173, 86, 0) 100%
  );
}

/* FAQ の区切りはシルバー版 */
.horizon-line--silver {
  background: linear-gradient(
    90deg,
    rgba(227, 231, 242, 0) 0%,
    rgba(227, 231, 242, 0.5) 50%,
    rgba(227, 231, 242, 0) 100%
  );
}

/* =============================================================
   MOTION — reduced motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}