/* ==========================================================================
   tokens.css — デザイントークン（Figma 1920px キャンバス基準）
   幅上限は設けず、% / flex / grid で画面幅に追従させる。
   可変スケールは 2 系統あり、互いの変数を参照しない。

     文字サイズ … --fs-*    サイズごとに倍率が変わる連続カーブ
     余白       … --space-* 上下と左右で別倍率
   ========================================================================== */

:root {
  /* --- レイアウト基準値 -------------------------------------------------- */
  --header-height: 86px;
  --header-pad-top: 40px;
  /* 下層本文の最大幅。INDEX列を持つページと、INDEXを持たない1カラムページで
     値が異なるため2つ持つ。ページ固有CSSへ実値を直接書かず、必ずここから引く。
     ※ --lower-single-max はメディアクエリの分岐点にも使う。
       メディアクエリは var() を解決できないため、そちらだけは実値で書き、
       この変数と揃えていることをコメントで示すこと。 */
  --lower-content-max: 1280px;
  --lower-single-max: 1600px;
  /* メニューボタン（header のハンバーガー / gnav の×）。
     header と gnav で同じ箱・同じオフセットを共有し、線は箱の中央に置く */
  --menu-btn-offset: 4px;   /* 下端からのオフセット */
  --menu-btn-optical: 2px;  /* ナビ文字のキャップ中央に合わせる視覚補正 */
  --menu-btn-w: 30px;
  --menu-btn-h: 27px;
  --menu-btn-bar: 2px;      /* 線の太さ */
  --menu-btn-gap: 4px;      /* ハンバーガーの線間 */

  /* --- カラー ------------------------------------------------------------ */
  --color-brand: #3e8be5;
  --color-text: rgba(0, 0, 0, 0.8);
  --color-text-muted: rgba(0, 0, 0, 0.4);
  --color-text-faint: rgba(0, 0, 0, 0.15);
  --color-surface: #f5f5f5;
  --color-bg: #ffffff;
  /* Figma共通の横破線: 4px線 + 4px空き / 黒20% */
  --line-dash-x: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.2) 0 4px,
    transparent 4px 8px
  );

  /* ========================================================================
     文字サイズの可変スケール

     --fs-vw-max(1920) で 100%、--fs-vw-min(1280) で下表の倍率まで縮小し、
     その外側は頭打ち。倍率はサイズごとに連続的に変わる（段階なし）。
       12px → 88.7% / 16px → 85.0% / 40px → 78.3% / 160px → 75.0%
     サイズについて単調なので、大小関係は逆転しない。

     ■ 使い方
     font-size は必ず var(--fs-NN) で書く。rem は使わない
     （ルートの font-size はブラウザ既定の 16px 固定で可変ではないため、
       1.6rem は 16px ではなく 25.6px になる）。
     新しいサイズはトークン表に同じ形で1行足す。
     カーブを変えるときは下のアンカー 4 変数だけを触る。

     ■ 式
       size = N * --_fs-u + --_fs-add        N = 設計px ÷ 10
     ======================================================================== */

  /* --- 公開ノブ --- */
  --fs-base: 10;          /* N=1 の実寸(px) @1920。設計px ÷ 10 = N */
  --fs-vw-max: 1920;         /* 100% になる幅 */
  --fs-vw-min: 1280;         /* 縮小が止まる幅（PC 最下限） */
  --fs-anchor-s: 16;      /* 小さい側のアンカー: このサイズが */
  --fs-ratio-s: 0.85;     /*   --fs-vw-min でこの倍率になる */
  --fs-anchor-l: 160;     /* 大きい側のアンカー: このサイズが */
  --fs-ratio-l: 0.75;     /*   --fs-vw-min でこの倍率になる */
  --fs-floor: 10px;       /* 絶対下限。現状 1280px では効かない */

  /* --- 内部変数（アンカー 4 変数から導出。直接触らない）---
     縮小量を設計サイズ s の一次式 D(s) = a*s + b とみなしたときの係数 */
  --_fs-b: calc(
    (var(--fs-ratio-s) - var(--fs-ratio-l)) /
      (1 / var(--fs-anchor-l) - 1 / var(--fs-anchor-s))
  );
  --_fs-a: calc((1 - var(--fs-ratio-l)) - var(--_fs-b) / var(--fs-anchor-l));

  /* 進行度 t（1920 で 0px → 1280 で 1px）。無単位にできないので長さで持つ */
  --_fs-t: clamp(
    0px,
    calc((var(--fs-vw-max) * 1px - 100vw) / (var(--fs-vw-max) - var(--fs-vw-min))),
    1px
  );

  /* N に掛ける係数（1920: 10px → 1280: 7.389px） */
  --_fs-u: calc(
    var(--fs-base) * 1px - var(--fs-base) * var(--_fs-a) * var(--_fs-t)
  );
  /* 全サイズ共通のオフセット（1920: 0px → 1280: +1.778px） */
  --_fs-add: calc(0px - var(--_fs-b) * var(--_fs-t));

  /* --- サイズトークン（全て同じ形。font-size はここからのみ引く）--- */
  --fs-11:  max(var(--fs-floor), calc(1.1 * var(--_fs-u) + var(--_fs-add)));
  --fs-12:  max(var(--fs-floor), calc(1.2 * var(--_fs-u) + var(--_fs-add)));
  --fs-13:  max(var(--fs-floor), calc(1.3 * var(--_fs-u) + var(--_fs-add)));
  --fs-14:  max(var(--fs-floor), calc(1.4 * var(--_fs-u) + var(--_fs-add)));
  --fs-15:  max(var(--fs-floor), calc(1.5 * var(--_fs-u) + var(--_fs-add)));
  --fs-16:  max(var(--fs-floor), calc(1.6 * var(--_fs-u) + var(--_fs-add)));
  --fs-18:  max(var(--fs-floor), calc(1.8 * var(--_fs-u) + var(--_fs-add)));
  --fs-20:  max(var(--fs-floor), calc(2 * var(--_fs-u) + var(--_fs-add)));
  --fs-24:  max(var(--fs-floor), calc(2.4 * var(--_fs-u) + var(--_fs-add)));
  --fs-28:  max(var(--fs-floor), calc(2.8 * var(--_fs-u) + var(--_fs-add)));
  --fs-32:  max(var(--fs-floor), calc(3.2 * var(--_fs-u) + var(--_fs-add)));
  --fs-36:  max(var(--fs-floor), calc(3.6 * var(--_fs-u) + var(--_fs-add)));
  --fs-40:  max(var(--fs-floor), calc(4 * var(--_fs-u) + var(--_fs-add)));
  --fs-48:  max(var(--fs-floor), calc(4.8 * var(--_fs-u) + var(--_fs-add)));
  --fs-56:  max(var(--fs-floor), calc(5.6 * var(--_fs-u) + var(--_fs-add)));
  --fs-60:  max(var(--fs-floor), calc(6 * var(--_fs-u) + var(--_fs-add)));
  --fs-80:  max(var(--fs-floor), calc(8 * var(--_fs-u) + var(--_fs-add)));
  --fs-100: max(var(--fs-floor), calc(10 * var(--_fs-u) + var(--_fs-add)));
  --fs-120: max(var(--fs-floor), calc(12 * var(--_fs-u) + var(--_fs-add)));
  --fs-160: max(var(--fs-floor), calc(16 * var(--_fs-u) + var(--_fs-add)));

  /* ========================================================================
     余白の可変スケール（上下・左右で別倍率）

     --space-vw-max(1920) で 100%、--space-vw-min(1280) で 左右 70% / 上下 80%
     まで線形に縮小し、その外側は頭打ち。

     ■ 使い方
     余白は必ず var(--space-x-NN) / var(--space-y-NN) で書く。
     新しい値は x/y 両方に1行ずつ足す（下記のとおり対で必要）。
       縦 = padding-top/bottom/block・margin-top/bottom・top/bottom
       横 = padding-left/right/inline・margin-left/right・left/right

     gap は「gap: <row-gap> <column-gap>」なので常に両軸で書く。
       gap: var(--space-y-40) var(--space-x-40);
     flex-direction を調べる必要がなく、縦積みに変えても自動で縦の倍率に
     切り替わる。単一行の flex では使われない側は無視され、折り返す flex
     （.p-index-works__filter / .c-works-card__tags）では両方が効く。
     片側が未定義だと var() 置換に失敗して gap 全体が無効になるため、
     x と y は同じ値セットを持たせてある。

     ■ px 固定のまま（他の固定値と噛み合うため単独では動かせない）
       ヘッダー幾何   --header-height 86 / --header-pad-top 40 / --menu-btn-*
     ======================================================================== */

  /* --- 公開ノブ --- */
  --space-vw-max: 1920;    /* 余白が 100% になる幅 */
  --space-vw-min: 1280;    /* 余白の縮小が止まる幅（PC 最下限） */
  --space-ratio-x: 0.7;    /* 左右余白の --space-vw-min での倍率 */
  --space-ratio-y: 0.8;    /* 上下余白の --space-vw-min での倍率 */

  /* --- 内部変数（直接参照しない）---
     進行度 t（1920 で 0px → 1280 で 1px）。無単位にできないので長さで持つ */
  --_space-t: clamp(
    0px,
    calc(
      (var(--space-vw-max) * 1px - 100vw) /
        (var(--space-vw-max) - var(--space-vw-min))
    ),
    1px
  );
  /* 設計 1px あたりの実寸（1920: 1px → 1280: 横 0.7px / 縦 0.8px） */
  --_space-x: calc(1px - (1 - var(--space-ratio-x)) * var(--_space-t));
  --_space-y: calc(1px - (1 - var(--space-ratio-y)) * var(--_space-t));

  /* --- 余白トークン（名前の数字＝設計 px）。x と y は同じ値セット --- */
  /* 左右 */
  --space-x-4:    calc(4 * var(--_space-x));
  --space-x-6:    calc(6 * var(--_space-x));
  --space-x-8:    calc(8 * var(--_space-x));
  --space-x-10:   calc(10 * var(--_space-x));
  --space-x-12:   calc(12 * var(--_space-x));
  --space-x-16:   calc(16 * var(--_space-x));
  --space-x-18:   calc(18 * var(--_space-x));
  --space-x-20:   calc(20 * var(--_space-x));
  --space-x-24:   calc(24 * var(--_space-x));
  --space-x-28:   calc(28 * var(--_space-x));
  --space-x-32:   calc(32 * var(--_space-x));
  --space-x-36:   calc(36 * var(--_space-x));
  --space-x-40:   calc(40 * var(--_space-x));
  --space-x-48:   calc(48 * var(--_space-x));
  --space-x-60:   calc(60 * var(--_space-x));
  --space-x-64:   calc(64 * var(--_space-x));
  --space-x-80:   calc(80 * var(--_space-x));
  --space-x-96:   calc(96 * var(--_space-x));
  --space-x-100:  calc(100 * var(--_space-x));
  --space-x-120:  calc(120 * var(--_space-x));
  --space-x-160:  calc(160 * var(--_space-x));
  --space-x-200:  calc(200 * var(--_space-x));
  --space-x-240:  calc(240 * var(--_space-x));
  --space-x-280:  calc(280 * var(--_space-x));
  --space-x-320:  calc(320 * var(--_space-x));
  --space-x-360:  calc(360 * var(--_space-x));
  --space-x-400:  calc(400 * var(--_space-x));
  --space-x-480:  calc(480 * var(--_space-x));
  --space-x-560:  calc(560 * var(--_space-x));
  --space-x-600:  calc(600 * var(--_space-x));
  --space-x-640:  calc(640 * var(--_space-x));
  --space-x-720:  calc(720 * var(--_space-x));
  --space-x-800:  calc(800 * var(--_space-x));
  /* 上下 */
  --space-y-4:    calc(4 * var(--_space-y));
  --space-y-6:    calc(6 * var(--_space-y));
  --space-y-8:    calc(8 * var(--_space-y));
  --space-y-10:   calc(10 * var(--_space-y));
  --space-y-12:   calc(12 * var(--_space-y));
  --space-y-16:   calc(16 * var(--_space-y));
  --space-y-18:   calc(18 * var(--_space-y));
  --space-y-20:   calc(20 * var(--_space-y));
  --space-y-24:   calc(24 * var(--_space-y));
  --space-y-28:   calc(28 * var(--_space-y));
  --space-y-32:   calc(32 * var(--_space-y));
  --space-y-36:   calc(36 * var(--_space-y));
  --space-y-40:   calc(40 * var(--_space-y));
  --space-y-48:   calc(48 * var(--_space-y));
  --space-y-60:   calc(60 * var(--_space-y));
  --space-y-64:   calc(64 * var(--_space-y));
  --space-y-80:   calc(80 * var(--_space-y));
  --space-y-96:   calc(96 * var(--_space-y));
  --space-y-100:  calc(100 * var(--_space-y));
  --space-y-120:  calc(120 * var(--_space-y));
  --space-y-160:  calc(160 * var(--_space-y));
  --space-y-200:  calc(200 * var(--_space-y));
  --space-y-240:  calc(240 * var(--_space-y));
  --space-y-280:  calc(280 * var(--_space-y));
  --space-y-320:  calc(320 * var(--_space-y));
  --space-y-360:  calc(360 * var(--_space-y));
  --space-y-400:  calc(400 * var(--_space-y));
  --space-y-480:  calc(480 * var(--_space-y));
  --space-y-560:  calc(560 * var(--_space-y));
  --space-y-600:  calc(600 * var(--_space-y));
  --space-y-640:  calc(640 * var(--_space-y));
  --space-y-720:  calc(720 * var(--_space-y));
  --space-y-800:  calc(800 * var(--_space-y));

  /* --- セマンティック別名 --- */
  --space-side: var(--space-x-60);        /* コンテンツ左右パディング */

  /* --- タイポグラフィ ---------------------------------------------------- */
  /* 欧文は Metropolis 1ファミリー。旧 Gotham Book / Medium は
     font-weight: 400 / 600 へ対応付ける（見た目で判断して確定した組み合わせ）。
     実体は assets/css/fonts.css でセルフホストしている。
     キャップハイトの補正は行わない。font-size-adjust で Gotham の 0.700 へ
     揃えていた時期があるが、補正しないほうが Gotham に近く見えるため外した
     （docs/font-strategy.md 決定8）。 */
  --font-en: "Metropolis", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  /* A1明朝 StdN は R / M / B が別ファミリーとして配信されるため、
     font-weight では選び分けられない。トークンを3本持つのはこのため。

     MFW- の後ろに続く2つは、制作機にインストール済みの A1明朝 を指す開発用の逃げ道。
     モリサワの配信はドメイン登録制で、未登録の環境（別ポート・別ホスト名・
     プレビュー用URLなど）では 404 になり serif まで落ちる。閲覧者側は未インストールなので
     production の見え方には影響しない。英語名と日本語名の両方を並べるのは、
     OSとバージョンでどちらが引けるかが変わるため。
     **ウエイト記号（R / M / B）まで含めること。** 省いた "A P-OTF A1明朝 StdN" は
     どのトークンからも R を返すので、M と B が細く出る。
     この逃げ道があると配信の不調に気づきにくくなる。疑わしいときは
     docs/font-strategy.md 決定10 の実描画幅で判定する手順を使う。 */
  --font-mincho-r: "MFW-PA1MinchoStdN-Regular", "A P-OTF A1 Mincho StdN R", "A P-OTF A1明朝 StdN R", serif;
  --font-mincho-m: "MFW-PA1MinchoStdN-Medium", "A P-OTF A1 Mincho StdN M", "A P-OTF A1明朝 StdN M", serif;
  --font-mincho-b: "MFW-PA1MinchoStdN-Bold", "A P-OTF A1 Mincho StdN B", "A P-OTF A1明朝 StdN B", serif;
  --font-base: var(--font-jp);

  --lh-base: 1.6;

  /* --- モーション -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.3s;

  /* ホバー: Figma に定義が無いため、実装側で決めた値で確定 */
  --hover-opacity: 0.7;       /* テキストリンクの減光 */
  --hover-veil: rgba(255, 255, 255, 0.06); /* 面リンクの明度アップ */
  --hover-thumb-scale: 1.06;  /* サムネイル画像の拡大率 */

  /* --- 地のテクスチャ（Figma main_bg 相当）------------------------------
     512px のタイル（assets/img/texture.jpg）をリピートして使う。
     粒の大きさは Figma（4096px 素材を 1920 幅に縮小した見かけ）に合わせた。
     ※ url() は変数に入れない：変数に入れた相対パスは「その変数を使う側の
       CSS ファイル」基準で解決されるため、階層の違う CSS（components/ や
       pages/）から使うとパスが壊れる。画像パスは各 CSS に直接書く。 */
  --texture-size: 512px;
  --texture-opacity: 0.1;        /* セクションの main_bg = オーバーレイ 10% */
  --texture-body-opacity: 0.05;  /* ページ地の紙目 = 乗算 5% */

  /* --- 星の縁のぼかし ----------------------------------------------------
     放射シンボル（assets/img/star.svg）の縁を透明へ落とすマスク。
     アルファの刻みは GNAV の帯（--gnav-mask-gradient）と同じ smoothstep で、
     方向だけ円形に置き換えたもの。直線的な減衰だと不透明側・透明側それぞれの
     開始点で傾きが急に変わり、そこが輪になって見える。

     circle closest-side は、箱の短いほう（星は縦長なので幅）の半分を半径に取る。
     正円が箱の中へ収まり、左右の先端が渡りの終わり（＝完全な透明）に一致する。
     上下の先端は半径の外にあるので、箱の端へ届く前に消える。

     ellipse farthest-side にはしない。楕円は箱の縦横比に追従して縦長になり、
     正円にするならどちらかの辺を基準に選ぶことになる。farthest-side は
     長いほう（高さ）が半径になり、左右の先端が濃いまま残る。

     --star-mask-solid を変えるときは :root で上書きする。使う側の要素へ書いても
     効かない。--star-mask-gradient は :root で宣言されているので var() の置換も
     :root で終わり、子孫は置換済みの計算値を継承するだけになる。
     実測：要素側へ 10% を書いてもストップは 50% 52.5% 55%… のまま、
     :root へ書いたときだけ 10% 14.5% 19%… へ変わる。
     星ごとに比を変えたい場合は、その星専用のグラデーションを別トークンで持つ */
  --star-mask-solid: 50%;   /* 中心からここまでは減衰なし */
  --star-mask-band: calc(100% - var(--star-mask-solid));
  --star-mask-gradient: radial-gradient(
    circle closest-side at 50% 50%,
    #000 0,
    #000 var(--star-mask-solid),
    rgba(0, 0, 0, 0.993) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.05),
    rgba(0, 0, 0, 0.972) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.1),
    rgba(0, 0, 0, 0.936) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.15),
    rgba(0, 0, 0, 0.896) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.2),
    rgba(0, 0, 0, 0.844) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.25),
    rgba(0, 0, 0, 0.784) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.3),
    rgba(0, 0, 0, 0.648) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.4),
    rgba(0, 0, 0, 0.5) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.5),
    rgba(0, 0, 0, 0.352) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.6),
    rgba(0, 0, 0, 0.216) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.7),
    rgba(0, 0, 0, 0.156) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.75),
    rgba(0, 0, 0, 0.104) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.8),
    rgba(0, 0, 0, 0.065) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.85),
    rgba(0, 0, 0, 0.028) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.9),
    rgba(0, 0, 0, 0.007) calc(var(--star-mask-solid) + var(--star-mask-band) * 0.95),
    rgba(0, 0, 0, 0) 100%
  );

  /* --- レイヤー ----------------------------------------------------------
     ヘッダーが最前面。Swup 遷移で永続させている以上、ベールに覆わせない。
     覆うと、カーソル下のリンクで pointerleave → ベールが引いた瞬間に
     pointerenter が再発火し、ホバーのモーションが遷移のたびに再生される
     （text-swap-hover.js は pointerenter で再生する）。
     GNAV はベールの上。開いた状態から遷移したとき、退場を幕の裏へ隠さない。 */
  --z-loader: 1000;   /* 初回ローディングとページ遷移のベール */
  --z-gnav: 1100;
  --z-header: 1200;   /* 最前面 */
  --z-orientation: 1300;   /* SP横持ち警告。ヘッダーより前 */
}

/* ==========================================================================
   SP（max-width: 767px）

   SP専用のスケールは作らない。トークン定義（--fs-* / --space-x-* / --space-y-*）は
   1行も書き換えず、カーブのノブ（--fs-ratio-l）と役割別名（--space-side）だけを
   差し替える。詳細と根拠は docs/sp-strategy.md の決定1。

   1280px 以下は縮小が止まるため、SP帯の既定値は「1280px の値」になる。
   そこを出発点に、文字はノブ1本で20トークンをまとめて落とし、
   余白はスケールを据え置いたまま、大きすぎる箇所だけ各セレクタのSPブロックで
   小さいトークンを選び直す。

   読み替え（名前と実寸は一致しない）
     文字 … --fs-ratio-l 適用後の実寸表は docs/sp-strategy.md 決定1
     余白 … 横 ×0.7 / 縦 ×0.8（例: --space-x-28 → 19.6px、--space-y-20 → 16px）

   --fs-80 以上の5宣言は誤差が大きく残るため、ここでは吸収しない。
   使用箇所のSPブロックで小さいトークンへ選び直す（同決定1）。
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    /* 大きい側のアンカー倍率。この1行で --fs-* 20個が再計算される */
    --fs-ratio-l: 0.5;

    /* コンテンツ左右パディング。スケールの段ではなく役割に付いた別名なので、
       ここで差し替える。PC 42px → SP 19.6px（Figma SPカンプの20pxに対応） */
    --space-side: var(--space-x-28);

    /* ヘッダーの帯。Figma SP（422:2674）は上20px + ロゴ30px = 高さ50px。
       スケールの段ではなくレイアウト基準値なので、ここで差し替える。
       下層本文の上余白（lower-page.css）とアンカー着地点もこれに追従する */
    --header-height: 50px;
    --header-pad-top: 20px;
  }
}