/* ============================================================
   tokens.css — 全ページ共通のデザイントークン
   ============================================================

   このサイトはCSSが4つの島に分かれており、:root がそれぞれ別に存在する。

     A: main.css (+album/blog/flow) → index, album, company, blog/*, column/*
     B: setmen.css (+space.css)     → setmen, space
     C: cart.css 単独               → cart
     D: terms.css 単独              → terms

   そのため「main.css の :root を共通ソースにする」ことができない。
   横断して効かせたい値はこのファイルに置き、各ページで**最初のCSS**として
   読み込む（後続の各CSSが必要に応じて上書きできる余地を残すため）。

   ── ブレークポイント（4段）────────────────────────────
   ビルド工程がないので @media に CSS変数は使えない。数値は直書きし、
   「唯一の正」はこのコメントとする。**これ以外の数値を @media に書かない。**

     モバイル       〜 599px       主検証幅 390px
     ラージフォン   600 〜  833px  iPad mini(744) / iPad(810) はここ
     タブレット     834 〜 1179px  iPad縦(834) / iPad Pro縦(1024)
     デスクトップ  1180px 〜       iPad Pro 11"横(1194) 以上

   834 は iPad縦の実幅。ここをタブレット段の先頭に置くと、768 以下の
   既存モバイルCSSがそのまま効くので回帰が出ない。
   1180 は 1024 をタブレット側に残しつつ 1194/1366 をデスクトップに入れる境界。

   標準形:  @media (min-width: 834px) and (max-width: 1179.98px) { ... }
   ============================================================ */

:root {
    /* ── レイアウト ───────────────────────────────── */

    /* 画面幅に追従する左右余白。セクションごとに 80px を直書きしていると
       タブレット幅で本文だけが極端に狭くなるため、全幅でなめらかに縮む
       1つのトークンに集約する。 */
    --gutter: clamp(20px, 5.5vw, 80px);

    --header-h: 60px;
    --tap-min: 44px;
    /* タップ領域の最小。Apple HIG 44pt / WCAG 2.5.8 */

    /* コンテナ幅。1360/1280/1240/1100/900/720 と6系統に散っていたものを
       用途で3つに集約する。 */
    --container-wide: 1360px;
    /* ヒーローなど、フルブリードに近い見せ場 */
    --container-main: 1240px;
    /* 標準セクション */
    --container-text: 760px;
    /* 可読性優先の本文（規約・記事） */

    /* ── フォントサイズ ───────────────────────────────
       min は 390px 時、max は 1440px 時の値。
       日本語本文が 13px まで落ちている箇所があったため、本文系の下限は
       15px を切らせない。 */
    --text-2xs: 11px;
    /* キャプション下限。これ以下は作らない */
    --text-xs: clamp(12px, 11.63px + 0.10vw, 13px);
    --text-sm: clamp(13px, 12.26px + 0.19vw, 15px);
    /* UIラベル・ボタン */
    --text-base: clamp(15px, 14.26px + 0.19vw, 17px);
    /* 本文 */
    --text-md: clamp(17px, 15.52px + 0.38vw, 21px);
    --text-lg: clamp(20px, 17.03px + 0.76vw, 28px);
    --text-xl: clamp(24px, 18.31px + 1.46vw, 39px);
    --text-2xl: clamp(30px, 20.71px + 2.38vw, 55px);
    --text-3xl: clamp(36px, 20.00px + 4.10vw, 79px);
    /* ヒーロー */

    /* ── 行間 ─────────────────────────────────────── */
    --lh-tight: 1.25;
    /* 大見出し */
    --lh-snug: 1.45;
    /* 小見出し・UI */
    --lh-body: 1.8;
    /* 日本語本文。1.6 では詰まって見える */
}

/* 共通コンテナ。既存の .hero-inner などは置き換えず、
   それぞれの max-width を上の変数参照に差し替えていく方針。
   新規マークアップではこちらを使う。 */
.u-container {
    width: 100%;
    max-width: var(--container-main);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.u-container--wide {
    max-width: var(--container-wide);
}

.u-container--text {
    max-width: var(--container-text);
}