/* web-design-control · mode: build · ds: DESIGN.md（Wheat Works・ギャラリー由来の拡張 DS）
 * ds-allow: T-17
 * 正本: docs/DESIGN.md · 方向づけの記録: docs/DIRECTION.md
 * コントラスト（WCAG）は値の横に記載。計算はすべて実測済み（2026-10-03）
 */

:root {
  /* ---- 色: 地と文字 ---- */
  --paper: #ECEAE3;         /* 麦わらの灰（地） */
  --card: #F8F7F3;          /* 粉の白（一段上の面・シート） */
  --ink: #1D1C17;           /* 墨（本文）  paper 14.17:1 / card 15.92:1 */
  --ink-muted: #57534A;     /* 補助文      paper 6.36:1 / card 7.15:1 */
  --rule: #CFCBC0;          /* 罫線（装飾のみ） */
  --link: #6E6125;          /* 本文中のリンク  paper 5.13:1 / card 5.76:1 */

  /* ---- 色: 夜の劇場（注目作品の面） ---- */
  --night: #191915;
  --night-ink: #BDB9AE;     /* night 8.99:1 */
  --night-muted: #8E8A80;   /* night 5.12:1（12px 以上） */
  --night-2: #24241F;       /* 夜の中の一段上の面（差し込み枠） */

  /* ---- 色: 収穫のクレヨン（面として塗る。文字は常に --ink） ---- */
  --grain: #E8C64A;         /* 麦の穂  ink 10.24:1 */
  --sprout: #9FCB62;        /* 芽      ink 9.09:1 */
  --sky: #92B7E8;           /* 空      ink 8.26:1 */
  --bloom: #EDA6C5;         /* 花      ink 8.83:1 */
  --soil: #3A3125;          /* 土（濃い面。文字は --paper 10.6:1 / --grain 7.66:1） */

  /* ---- ブランドの印（Wheat から継承。ロゴと細い罫線だけ。文字に使わない: paper 2.51:1） ---- */
  --wheat-gold: #A89438;

  --focus: var(--ink);      /* 明るい面のフォーカス */
  --focus-on-dark: var(--grain);

  /* ---- 文字 ---- */
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display-ja: "Noto Sans JP", "Hiragino Sans", sans-serif;           /* 900 のみ */
  --font-display-en: "Archivo", "Noto Sans JP", sans-serif;                 /* 可変: wdth 112〜125 / wght 800〜900 */
  --font-statement: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 500 のみ */

  --fs-giant: clamp(4.5rem, 15vw, 14rem);     /* 和文の大きな一語（装飾見出し・1行） */
  --fs-display: clamp(3.25rem, 10.5vw, 9.5rem); /* 欧文の大見出し */
  --fs-h2: clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-statement: clamp(1.25rem, 2.1vw, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-meta: 0.75rem;

  --lh-giant: 1.1;          /* J-02: 1.1 未満にしない */
  --lh-display: 0.92;       /* 欧文のみ */
  --lh-heading: 1.3;
  --lh-statement: 2;
  --lh-body: 1.9;

  --ls-giant: -0.02em;      /* J-03: 24px 以上の見出しのみ、−0.02em まで */
  --ls-display: -0.02em;
  --ls-statement: 0.08em;   /* 明朝の宣言文は字間を広く */
  --ls-meta: 0.04em;

  /* ---- 余白（4px 基準） ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --section-y: clamp(var(--s-8), 10vw, var(--s-10));
  --shell: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --sheet-inset: clamp(8px, 1.2vw, 16px);   /* シートを画面端から浮かせる量 */

  /* ---- 角丸の対応表（これ以外を使わない: T-15） ---- */
  --r-sheet: clamp(20px, 2.4vw, 32px);  /* 全幅のシート（セクションの面） */
  --r-card: 16px;                       /* 作品カード・工程カード */
  --r-thumb: 12px;                      /* 画像の枠 */
  --r-pill: 999px;                      /* チップ・CTA */

  /* ---- 動き ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* 登場・出現 */
  --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);        /* hover・押下 */
  --dur-press: 120ms;
  --dur-ui: 240ms;
  --dur-reveal: 700ms;      /* スクロール出現（1回だけ） */
  --dur-intro: 1100ms;      /* ヒーローの登場（ページで1か所だけの見せ場） */
  --stagger: 70ms;
  --press-scale: 0.97;

  --z-sheet: 1; --z-header: 300; --z-menu: 400;
}