/* ============================================================
   DESIGN TOKENS  —  ブランドを担保する「型」
   WordPress 化の際、このファイルはテーマ側で固定する。
   管理画面から編集可能にしてはならない。
   ============================================================ */

:root{

  /* ---- COLOR ------------------------------------------------
     [TEMPORARY PURPLE]
     ブランド Purple の正式値は未確定(docs/Research/2026-09-01_asset-audit.md §1)。
     現行サイトから採取不能であることが調査で確定しているため、
     下記は Prototype 検証専用の暫定値である。正式値ではない。
     確定後は --brand-purple / --brand-purple-deep の 2 行だけ差し替える。
     ---------------------------------------------------------- */
  --brand-purple:      #45305F;   /* TEMPORARY — not the confirmed brand color */
  --brand-purple-deep: #241A34;   /* TEMPORARY */
  --brand-purple-veil: rgba(69, 48, 95, .84); /* TEMPORARY: 写真に重ねる色面 */

  --ink:        #1E1B22;          /* 純黒にしない。Purple 側へ寄せた濃色 */
  --ink-70:     rgba(30, 27, 34, .70);
  --ink-45:     rgba(30, 27, 34, .45);
  --white:      #FFFFFF;
  --off-white:  #F7F6F4;
  --white-70:   rgba(255,255,255,.70);
  --white-45:   rgba(255,255,255,.45);

  --hair:         rgba(30, 27, 34, .16);
  --hair-strong:  rgba(30, 27, 34, .30);
  --hair-light:   rgba(255,255,255,.24);

  /* ---- TYPE SCALE (Desktop = 固定単位) --------------------- */
  --ff-display: "Helvetica Neue", "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
           "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;

  /* 巨大英字は4段階。セクションごとに「大 / 中 / 静かな小」の強弱をつける。
     HERO だけがピークにならないよう、途中にも視覚的ピークを置く。 */
  --fs-display-xl: 116px;  /* ピーク:PHILOSOPHY / STUDIOS / FINAL */
  --fs-display:     96px;  /* 大:METHOD */
  --fs-display-m:   68px;  /* 中:STORIES */
  --fs-display-s:   40px;  /* 静かな小:INSTRUCTORS / VOICE */
  --fs-h2:       34px;   /* 和文セクション見出し */
  --fs-lead:     19px;
  --fs-body:     16px;
  --fs-label:    12px;
  --fs-num:      64px;   /* METHOD のステップ番号 */

  --lh-display: .95;
  --lh-h2:      1.5;
  --lh-body:    1.9;
  --lh-label:   1.4;

  --ls-display: .02em;
  --ls-h2:     -.02em;
  --ls-body:    .02em;
  --ls-label:   .12em;

  /* ---- LAYOUT ----------------------------------------------
     基準幅(--shell)を持たせ、超ワイドでも文字と写真が離れすぎないようにする。
     ただし全コンテンツを同じ箱に閉じ込めない:HERO / Purple 全面 / STUDIOS /
     FINAL の写真と一部の巨大英字は意図的に基準幅の外へ出す。 */
  --gut: 64px;                                        /* 最小左右余白 */
  --shell: 1360px;                                    /* 基準幅 */
  --pad: max(var(--gut), (100vw - var(--shell)) / 2); /* 実効左右余白 */
  --measure: 640px;     /* 和文テキストブロック最大幅 */

  /* ---- GLOBAL VERTICAL RHYTHM ------------------------------
     セクションの呼吸量はコンテンツの役割で決める(4段階)。
     原則:**遷移の重みは「次のセクションの上」に置き、「前のセクションの下」には残さない。**
     下に大きく残すと残余(Dead Space)に見え、上に置くと入口(余韻)として読める。
     そのため各 tier は padT > padB。 */
  --sec-compact-t: 128px;  --sec-compact-b:  96px;   /* 実用情報:VOICE / PRICE */
  --sec-standard-t:168px;  --sec-standard-b:120px;   /* 通常 */
  --sec-open-t:    208px;  --sec-open-b:    152px;   /* 思想・方法・写真+文章 */
  --sec-lead-in:   200px;                            /* 全幅の SHOWCASE 面へ入る直前の助走 */

  /* ---- AFTERGLOW SPACE --------------------------------------
     「次へ入るための余白」(Transition)とは別に、
     「いま見たものを見終えるための余白」。Visual-led なセクション
     (大型写真 / Before・After / ポートレート / 施設写真)にだけ、
     そのセクションの構図に合わせて個別に与える。
     **Global token として全セクションへ一律適用しない。** */
  --afterglow-s: 72px;    /* 単一の大型写真を見終える */
  --afterglow-m: 88px;    /* 複数の Visual が連なるものを見終える */

  /* ---- OUTER SPACE ------------------------------------------
     大型写真を「背景面」ではなく「画面内に置かれた Visual Object」として
     扱うための外周余白。Viewport Edge ≠ Image Edge にする。
     参照実装(PDP)のインナーは width:93.75% + margin:auto
     = 1440 で 45px / 1920 で 60px の外周。これを原理として翻訳する。
     **全画像へ一律には付けない。** 役割ごとに別値を持たせる。 */
  --outer-lg: max(48px, 3.4vw);   /* 明色の節に単独で置かれた大型写真(WHY PERSONAL) */
  --outer-sm: max(28px, 2.1vw);   /* 色面の上に置かれた写真(PHILOSOPHY)。面から少しだけ離す */

  /* 旧3段階(既存の .sec--s/m/l が参照。段階的に tier へ置き換える) */
  --sec-s: 104px;
  --sec-m: 140px;
  --sec-l: 192px;

  /* ---- TEXT RHYTHM(ブロック間の呼吸)------------------------
     一律 24px をやめ、役割ごとの梯子にする。line-height は変えない。 */
  --tx-xs: 14px;   /* 画像 → キャプション / 英字 → 和文(同一ブロック内) */
  --tx-s:  28px;   /* ラベル → 見出し */
  --tx-p:  30px;   /* 段落 → 段落 */
  --tx-m:  42px;   /* 見出し → 本文 / リード */
  --tx-l:  64px;   /* 本文 → CTA / 本文 → 画像 */

  /* ---- MOTION ----------------------------------------------
     サイト全体で唯一の値。セクションごとに変えない。
     PDP の値(.5s / cubic-bezier(.165,.84,.44,1))は使用しない。
     ---------------------------------------------------------- */
  --dur:      .8s;                              /* 主要モーション */
  --dur-micro:.3s;                              /* hover / header */
  --ease:     cubic-bezier(.22, .61, .36, 1);   /* 減速のみ */
  --stagger:  .06s;
  --move:     24px;                             /* Text Reveal 移動距離 */
  --scale-in: 1.06;                             /* Slow Image Scale */
}

/* ---- MOBILE = 流体単位(vw)。Desktop の縮小ではない ------- */
@media (max-width: 899px){
  :root{
    --fs-display-xl: 13.5vw;
    --fs-display:    12vw;
    --fs-display-m:  12.4vw;
    --fs-display-s:  6.4vw;
    --fs-h2:         6.4vw;
    --fs-lead:       4.2vw;
    --fs-body:       3.9vw;
    --fs-label:      3.1vw;
    --fs-num:        12vw;

    --lh-body:    1.85;

    --gut:       20px;
    --shell:     100%;
    --pad:       20px;
    --measure:   100%;
    /* Mobile は現在の密度を基準にする。Desktop の増分を比例で流さない */
    --sec-compact-t: 68px;  --sec-compact-b: 60px;
    --sec-standard-t:88px;  --sec-standard-b:72px;
    --sec-open-t:   108px;  --sec-open-b:    88px;
    --sec-lead-in:   96px;

    --sec-s:      64px;
    --sec-m:      88px;
    --sec-l:     116px;

    --tx-xs: 12px;
    --tx-s:  20px;
    --tx-p:  22px;
    --tx-m:  28px;
    --tx-l:  40px;

    --move:      16px;
  }
}