/* デザイントークン
   出典: DESIGN.md（HARU 専用。MUJI の値は参考として一部を継承）
   色・余白・タイポ・形・動きの値はここだけで定義し、他のCSSは var() で参照する。
   追加・変更したトークンは DESIGN.md の対応節を併記する。 */
:root {
  /* Brand — DESIGN.md §2
     主色は「面」として使う（hero / proof / cta の3か所）。追加の色は入れない。 */
  --c-main: #7f0019;                                       /* えんじ（現行ロゴの色を維持） */
  --c-main-deep: color-mix(in srgb, var(--c-main) 78%, #000);  /* hover・押下 */
  --c-main-tint: color-mix(in srgb, var(--c-main) 8%, #fff);   /* 薄い面 */
  --c-main-tint-2: color-mix(in srgb, var(--c-main) 15%, #fff);
  --c-on-main: #fff;                                       /* 主色面の上の文字（約11:1） */
  --c-on-main-sub: rgb(255 255 255 / .86);
  --c-red: var(--c-main);    /* 旧名。既存CSSの参照を壊さないための別名 */
  --c-kinari: #f4eede;       /* きなり: 地色（暖） */
  --c-beige: #e0ceaa;        /* ベージュ: 温かみのある面 */
  --c-kinari-soft: color-mix(in srgb, #f4eede 42%, #fff);

  /* Neutral */
  --c-text: #3c3c43;         /* 純黒は使わない */
  --c-text-sub: #626268;     /* きなり地で 5.2:1（旧 #6d6d72 は 4.44:1 で基準未満） */
  --c-text-mute: #6a6a70;    /* きなり地で 4.6:1（旧 #76767b は 3.90:1 で基準未満） */
  --c-text-disabled: #9d9da0;
  --c-border: #d8d8d9;
  --c-border-soft: #ebebec;
  --c-bg: #fff;
  --c-bg-sub: #f5f5f5;
  --c-danger: #dd0c14;

  /* Font — DESIGN.md §3
     欧文ディスプレイは Poppins（自前ホスト: /assets/fonts/、OFL）。和文本文は当面システム書体。
     CSP が 'self' のため外部フォントサービスは使えない。 */
  --font-base: "Helvetica Neue", Arial, "Noto Sans JP", "Noto Sans JP Fallback",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "Poppins", "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;  /* Poppins は欧文のみ。和文は後続へ */
  --fw-display: 800;
  --ff-heading: "palt" 1;    /* 見出しの字詰め（font-feature-settings に渡す） */
  --ls-display: -0.02em;
  --ls-heading: 0.02em;

  /* Type scale — 目標: 見出し最大 : 本文 >= 5:1（DESIGN.md §3）。16px の本文に対し display は 80px 以上 */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  /* 見出し（I-3 で拡大。改行制御は base.css の「見出し」ブロックと対）。
     h2 は左カラム（220〜300px）に入るため、30px を上限にする。 */
  --fs-h1: clamp(26px, 3.6vw, 40px);
  --fs-h2: clamp(23px, 2.9vw, 30px);
  --fs-h3: clamp(18px, 1.6vw, 20px);
  --fs-display: clamp(56px, 9vw, 120px);   /* ヒーローの欧文・ロゴタイプ */
  --fs-numeral: clamp(28px, 3.2vw, 40px);  /* proof 先頭行の数字。表の中で強調するが、行を壊す大きさにはしない */
  --lh-base: 1.6;            /* UI */
  --lh-prose: 2;             /* 長文（各ページ約5,000字）。コーパスで2.0以上が21/27 */
  --lh-heading: 1.35;
  --lh-display: 1.05;

  /* Spacing (4px → 96px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 56px;
  --sp-11: 64px; --sp-12: 80px; --sp-13: 96px;

  /* Shape — DESIGN.md §4。役割ごとに半径を変える（全要素同一は避ける） */
  --radius-s: 8px;           /* ボタン・入力 */
  --radius-m: 16px;          /* カード */
  --radius-l: 32px;          /* 画像枠・大きな面 */
  --radius-sig: 0;           /* 署名（ロゴの正方形）だけは角丸0 */
  --radius-btn: var(--radius-s);
  --radius-input: var(--radius-s);
  --radius-card: var(--radius-m);

  /* Depth — DESIGN.md §6。ぼかしなしのオフセット影＋粒状ノイズ。適用は I-4 */
  --shadow-pop: 6px 6px 0 var(--c-main-tint-2);
  --shadow-pop-strong: 6px 6px 0 var(--c-main);
  --noise-opacity: .05;      /* 0.03〜0.08。自前のPNGタイルを重ねる */
  --photo-tint: 12%;         /* 写真に乗せる主色の割合（multiply）。写真ごとの色味の差を揃える */

  /* Signature — DESIGN.md §9。ロゴの正方形。使用箇所は3か所以内 */
  --sig-size-s: 10px;        /* 現行ロゴ・見出し脇の目印 */
  --sig-size-l: clamp(96px, 22vw, 320px);   /* hero の大きな四角 */

  /* Motion — DESIGN.md §7。動きは上限3。transform / opacity のみで動かす */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-pop: cubic-bezier(.2, 1.25, .3, 1);   /* ヒーローの文字・正方形だけ。小さなオーバーシュート（docs/MOTION_HERO.md） */
  --dur-fast: .15s;
  --dur-base: .35s;
  --dur-slow: .7s;

  /* Layout */
  --w-container: 1280px;       /* PC 基準。1536px 以上は layout.css で 1440 まで広げる */
  --gutter: clamp(16px, 4vw, 56px);  /* 左右余白（画面幅で伸縮） */
  --w-prose: 760px;
  --header-h: 64px;
}