/* ---------------------------------------------------------------------------
   Hunches design tokens
   hunches.co.jp / 2026-09
   spec/tokens.json が正本。このファイルはそれをCSSカスタムプロパティにした
   ものです。値を変えるときは両方を同時に直してください。
   --------------------------------------------------------------------------- */

:root {
  /* --- 色：地 ----------------------------------------------------------- */
  /* サイトで実際に使っている地の色。デザインシステムの canvas (#f7f5f0) は
     温かすぎたので、サイトは #fafbf9 を標準の地にしています。
     システム側の canvas を更新するか、この値を別トークンとして足す必要あり。*/
  --canvas:            #fafbf9;  /* 標準の地 */
  --canvas-band:       #f2f4f0;  /* 控えめな全幅の帯 */
  --canvas-paper:      #f7f5f0;  /* システムの canvas。ロゴの載る面などに */
  --surface:           #ffffff;  /* カード・パネル。＝浮いている面 */
  --surface-sunken:    #f1eee7;  /* 入力欄の底など */

  /* --- 色：文字 --------------------------------------------------------- */
  --ink:               #1e2420;  /* 本文・見出し */
  --ink-muted:         #55605a;  /* リード文・表のセル。地が無彩色のときだけ */
  --ink-subtle:        #626a65;  /* キャプション・注記 */

  /* --- 色：罫 ----------------------------------------------------------- */
  --line:              #e3ded3;  /* 装飾の罫、カードの縁 */
  --line-strong:       #838a84;  /* 意味を持つ罫：入力欄・セカンダリボタン */

  /* --- 色：ブランド ----------------------------------------------------- */
  --sage:              #397930;  /* 主役の緑。CTAの面、リンク */
  --sage-strong:       #2f6528;  /* sage のホバー／sage-soft の上の文字 */
  --sage-soft:         #dae9d8;  /* 淡い緑の面。フッターがこれ */
  --sage-tint:         #ecf4eb;  /* いちばん静かな緑の地。1ページ1か所 */
  --sage-line:         #b2d1ad;  /* sage-soft / sage-tint の上の罫 */
  --on-sage:           #ffffff;  /* sage ベタの上の文字 */
  --on-sage-subtle:    #edf5ec;  /* sage ベタの上の小さめの文字・ラベル */

  /* --- 色：アクセント --------------------------------------------------- */
  --clay:              #a4573a;  /* 1画面に1つ。実績カードの「結果」ラベル */
  --clay-tint:         #f7ece6;

  /* --- 色：状態 --------------------------------------------------------- */
  --success:           #1c6956;
  --success-tint:      #e8f2f0;
  --warning:           #8a5b0f;
  --warning-tint:      #f6eedd;
  --danger:            #a23a2f;
  --danger-tint:       #f9eae7;
  --info:              #2c5f7a;
  --info-tint:         #e7f0f5;
  --focus:             #2f6528;  /* 2px solid ＋ 2px の canvas 色オフセット */

  /* --- 書体 ------------------------------------------------------------- */
  /* 欧文 Figtree → 和文 Noto Sans JP の順。欧文グリフだけ Figtree が拾い、
     和文は Noto に落ちます。両方 Google Fonts。                            */
  --font-sans: "Figtree", "Noto Sans JP", "Source Han Sans JP",
               "源ノ角ゴシック JP", "Hiragino Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* --- 角丸 ------------------------------------------------------------- */
  --radius-sm:    6px;   /* バッジ、タグ、ボタン */
  --radius-md:   10px;   /* 入力欄・セレクト */
  --radius-lg:   16px;   /* カード、画像、ダイアログ */
  --radius-xl:   24px;   /* 大きなパネル、ヒーロー */
  --radius-pill: 999px;  /* 表の中のピルなど */

  /* --- 余白（4pxグリッド） ---------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-11: 72px;  /* 下層ページのセクション上下 */
  --space-12: 88px;  /* トップのセクション上下 */

  /* --- 影 --------------------------------------------------------------- */
  /* 構造は罫で作る。影は本当に浮くものだけ。サイト側ではほぼ未使用です。 */
  --shadow-raised:  0 1px 2px rgba(30, 36, 32, 0.05),
                    0 4px 12px rgba(30, 36, 32, 0.05);
  --shadow-overlay: 0 8px 32px rgba(30, 36, 32, 0.14);

  /* --- モーション ------------------------------------------------------- */
  --ease:            cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   120ms;  /* 色・不透明度の変化 */
  --duration-normal: 200ms;  /* サムネイルの拡大 */

  /* --- レイアウト ------------------------------------------------------- */
  --page-max:    1280px;  /* デザインの基準幅 */
  --gutter:        64px;  /* ページ左右の余白（1280px時） */
  --content-max: 1152px;  /* 1280 - 64*2 */
}

/* ---------------------------------------------------------------------------
   タイポグラフィのクラス。デザインシステムの type.groups に対応します。
   実装側でユーティリティを使う場合はこの値を移植してください。
   --------------------------------------------------------------------------- */

.t-display-xl { font-size: 44px; line-height: 1.3;  font-weight: 700; letter-spacing: 0.02em; }
.t-display-l  { font-size: 32px; line-height: 1.4;  font-weight: 700; letter-spacing: 0.02em; }
.t-display-m  { font-size: 24px; line-height: 1.5;  font-weight: 700; letter-spacing: 0.02em; }
.t-heading-l  { font-size: 20px; line-height: 1.55; font-weight: 700; }
.t-heading-m  { font-size: 17px; line-height: 1.6;  font-weight: 700; }
.t-body-l     { font-size: 17px; line-height: 1.9;  font-weight: 400; }
.t-body       { font-size: 15px; line-height: 1.9;  font-weight: 400; }
.t-body-s     { font-size: 13px; line-height: 1.8;  font-weight: 400; }
.t-label      { font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: 0.04em; }
.t-caption    { font-size: 12px; line-height: 1.6;  font-weight: 400; }

/* セクションの英字ラベル（Concept / Service / Works / Message / About / Contact）。
   Title Case。全大文字・広い字間のアイブロウには戻さないこと。 */
.t-section-label { font-size: 32px; line-height: 1.3; font-weight: 700;
                   letter-spacing: 0.02em; color: var(--sage-strong); }

/* ロゴタイプの字間で組む欧文。欧文専用、和文には使わないこと。 */
.t-wordmark { font-size: 20px; line-height: 1.4; font-weight: 500;
              letter-spacing: 0.18em; }