/* ==========================================================================
   ASTEEDA Executive Salon 2026 — サテライトLP
   デザイントークン
   出典: design/ds/tokens/*.css（Design System v2）
   値の変更はデザインシステム側の更新とセットで行うこと。
   ========================================================================== */

/* Webfonts — ブランド指定の3書体。代替不可。
   Noto Sans JP: 日本語見出し900／本文400,500,700
   Oswald: 欧文ラベル  /  Space Grotesk: 数字 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap");

/* 約物半角（Yaku Han JP v4.1.1 / OFL-1.1 AND MIT）— **見出し専用**。
   Noto Sans JP の約物（、。「」（）・！？等）をそのまま半角メトリクスにしたサブセット。
   字形はNotoのままなので §5 原則1「日本語書体は Noto Sans JP のみ」を外れない。
   4KB×2 と極小なので自前ホストする（CDN依存を増やさない）。
   本文には適用しない。長文は全角アキがある方が読みやすい。

   ⚠ サブセット版の `YakuHanJPs`（末尾s）を使わないこと。
   あちらは括弧類のみで「、」「。」を含まないため、和文見出しには効かない。

   unicode-range は公式CSSと同一。これが無いと約物以外もこのフォントを引きに行く */
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/YakuHanJP-Bold.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d,
    U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08,
    U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/YakuHanJP-Black.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d,
    U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08,
    U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

:root {
  /* ---------- Surface ---------------------------------------------------- */
  --bg-deep: #0a0e1a;
  --bg-base: #101b33;
  --bg-raised: #1a2f52;
  --bg-black: #000000;          /* 暗転専用。②⑧⑪のみ */
  --bg-footer: #070b15;

  --glass: rgba(26, 47, 82, 0.55);
  --glass-border: rgba(232, 236, 244, 0.14);
  --glass-blur: 12px;

  /* ---------- Text ------------------------------------------------------- */
  --text-hi: #ffffff;
  --text-body: #e8ecf4;
  --text-dim: #9aa7bf;

  /* ---------- Heat = 熱量（暖色。面・文字・CTAに使う） -------------------- */
  --gold: #d4af37;
  --sunset: #ff8a1e;
  --crimson: #c8102e;
  --grad-heat: linear-gradient(135deg, #d4af37, #ff8a1e 45%, #c8102e);

  /* ---------- Signal = 配信（寒色。フローフォーム・線・点のみ） ----------- */
  --signal-1: #2e6bff;
  --signal-2: #35c7e8;

  /* ---------- Accent（高輝度ゴールド。面積は小さく保つ） ------------------ */
  --accent-hi: #ffd400;
  --glow-accent: 0 0 24px rgba(255, 212, 0, 0.45);

  /* ---------- CTA（単色塗りのみ。グラデ不可） ----------------------------- */
  --cta-bg: #c8102e;

  /* ---------- Typography ------------------------------------------------- */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-jp-heading: "YakuHanJP", "Noto Sans JP", sans-serif;   /* 見出しのみ。約物が半角になる */
  --font-label: "Oswald", "Noto Sans JP", sans-serif;
  --font-num: "Space Grotesk", "Noto Sans JP", sans-serif;

  --fw-heading: 900;
  --fw-body: 400;
  --lh-heading: 1.15;
  --lh-h1: 1.1;                 /* H1は文章ではなく「面」。詰めて組む */
  --lh-body: 1.8;
  --ls-heading: -0.02em;
  --ls-label: 0.12em;
  --ls-num: -0.02em;

  /* PC下限：H1 72 / H2 52 / 特大数字 96。上回ってよい、下回るな。
     固定pxだと幅の狭いPCで折り返して切れるためclampで組む */
  --fs-h1: clamp(72px, 7.6vw, 116px);
  --fs-h2: clamp(52px, 4.4vw, 64px);
  --fs-h3: clamp(24px, 2.2vw, 30px);
  --fs-display-num: clamp(96px, 9.6vw, 140px);
  --fs-body: 1.0625rem;         /* 17px */
  --fs-lead: 1.0625rem;         /* 17px */
  --fs-sub: 0.9375rem;          /* 15px — 補足・注記 */
  --fs-caption: 0.8125rem;      /* 13px */

  /* ゴーストテキスト：視認できる濃さで置く。薄くしない */
  --ghost-stroke-w: 1.5px;
  --ghost-stroke: rgba(255, 255, 255, 0.18);
  --ghost-stroke-gold: rgba(212, 175, 55, 0.22);

  /* ---------- Spacing / Layout（8pxグリッド） ---------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  --container: 1080px;
  --gutter: 24px;               /* SP基準（モバイルファースト） */
  --section-y: 80px;            /* SP基準。PCで150pxへ */
  --radius: 8px;                /* 最大値。これを超えない */
  --cut: 36px;                  /* 斜め断ちの落差。PCで72pxへ */
  --flow-size: 130vw;           /* SP基準。PCで78vwへ */

  /* ---------- Effects ---------------------------------------------------- */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glow-gold: 0 0 24px rgba(212, 175, 55, 0.25);
  --glow-gold-strong: 0 0 32px rgba(212, 175, 55, 0.4);
  --glow-signal: 0 0 8px rgba(53, 199, 232, 0.5);

  --accent-bar-w: 48px;
  --accent-bar-h: 4px;

  --overlay-photo: linear-gradient(180deg, rgba(16, 27, 51, 0.35), rgba(10, 14, 26, 0.75));
  --scrim-photo: rgba(10, 14, 26, 0.45);

  --ease-enter: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-enter: 0.5s;

  /* ---------- Chrome ----------------------------------------------------- */
  --nav-h: 56px;                /* SP。PCで76pxへ */
  --sticky-cta-h: 96px;         /* SP下部固定バーの実測高。本文末尾の余白確保に使う */
}

/* PC（1024px以上）— カンプPC版の実測値に合わせる */
@media (min-width: 1024px) {
  :root {
    --gutter: 100px;            /* 1280幅 − 左右100px = コンテンツ1080px */
    --section-y: 150px;
    --cut: 72px;
    --flow-size: 78vw;
    --nav-h: 76px;
    --sticky-cta-h: 0px;
  }
}

/* SP（767px以下）— 見出し下限：H1 40 / H2 32 / 特大数字 56 */
@media (max-width: 767px) {
  :root {
    --fs-h1: clamp(40px, 11.4vw, 60px);
    --fs-h2: clamp(32px, 8vw, 42px);
    --fs-h3: 22px;
    --fs-display-num: clamp(56px, 15vw, 84px);
    --fs-body: 1rem;            /* 16px */
    --fs-lead: 0.9375rem;       /* 15px */
    --fs-sub: 0.84375rem;       /* 13.5px */
    --fs-caption: 0.75rem;      /* 12px */
    --ghost-stroke-w: 1px;
  }
}

/* 中間幅（768〜1023px）— PC版とSP版の間を補間する */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: 48px;
    --section-y: 112px;
    --cut: 56px;
    --flow-size: 100vw;
    --nav-h: 64px;
    --sticky-cta-h: 96px;
  }
}