/* ==========================================================================
   fff-foundation — 02-tokens.css
   サイト全体のデザイントークン（色・フォント・サイズ・余白）

   ⚠️ 直接 px / rem を書かず、ここで定義した変数を使う
   ⚠️ 新規変数は --fff- プレフィックス必須
   ⚠️ 「全体を変えたい」時はここを触る。個別 element じゃない
   ========================================================================== */

:root {
    /* ========== ブランド色（基本3色） ========== */
    --fff-white: #ffffff;
    --fff-black: #0a0a0a;
    --fff-beige: #a28e6d;

    /* ========== 用途別色 ========== */
    --fff-color-paper:       var(--fff-white);  /* 背景の紙色 */
    --fff-color-ink:         #1a1a18;           /* 本文の文字色（少し茶み） */
    --fff-color-black:       var(--fff-black);  /* 黒塗りブロック */
    --fff-color-muted:       #6f6b63;           /* ミュート（説明・補足、文字用） */
    --fff-color-gray:        #7a7670;           /* 中間グレー（背景用、少し暖色寄り） */
    --fff-color-gray-soft:   #d9d5cd;           /* 薄グレー（背景用、少し暖色寄り） */
    --fff-color-line:        #e7e2d6;           /* 罫線（薄ベージュ） */
    --fff-color-accent:      var(--fff-beige);  /* アクセント色（ロゴ等の点用） */

    /* ========== フォント ========== */
    --fff-font-body:    -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
    --fff-font-heading: "Hiragino Mincho ProN", "Yu Mincho", serif;
    --fff-font-accent:  "Yeseva One", serif;

    /* ========== フォントサイズ（viewport 連動 clamp）
       1280px以下は最小、1280-1600px で拡大、それ以上は最大で頭打ち ========== */
    --fff-fs-xs:         clamp(0.7rem,  0.85vw, 0.78rem);   /* 11-12.5px caption */
    --fff-fs-sm:         clamp(0.82rem, 0.95vw, 0.92rem);   /* 13-14.7px 本文 */
    --fff-fs-md:         clamp(1rem,    1.15vw, 1.1rem);    /* 16-17.6px h3 / lead */
    --fff-fs-lg:         clamp(1.25rem, 1.4vw,  1.4rem);    /* 20-22.4px h2 */
    --fff-fs-xl:         clamp(1.55rem, 1.75vw, 1.75rem);   /* 25-28px   h1 */
    --fff-fs-display:    clamp(2.2rem,  2.55vw, 2.55rem);   /* 35-41px   Hero title */
    --fff-fs-display-xl: clamp(3.4rem,  3.9vw,  3.9rem);    /* 54-62px   Hero 大 eyebrow */

    /* ========== 余白（5px ベースのステップ） ========== */
    --fff-space-1: 5px;
    --fff-space-2: 10px;
    --fff-space-3: 20px;
    --fff-space-4: 40px;
    --fff-space-5: 80px;
    /* ブロック内の余白（テキストが端ギリギリにならないように） */
    --fff-block-padding: clamp(1rem, 2.2vw, 2.4rem);  /* 16-38px */

    /* ========== 行間 ========== */
    --fff-lh-tight:  1.25;   /* 見出し */
    --fff-lh-normal: 1.8;    /* 本文 */
    --fff-lh-loose:  2.1;    /* 段落多い時 */

    /* ========== 文字間 ========== */
    --fff-ls-normal: 0;
    --fff-ls-wide:   0.05em;

    /* ========== 角丸 ========== */
    --fff-radius-sm:   4px;
    --fff-radius-md:   12px;
    --fff-radius-pill: 9999px;
}