/* ============================================================
   @kit-token  tokens.css（安田工業カスタム）
   @status     project
   @since      0.1.0
   @source     _starter-kit/tokens/tokens.css（spacing/font-size/transition を正本として踏襲）
   @todo       ダーク×青焼き配色は本案件で初実体化。安定したら HOW_TO_GROW 手順でキットへ還元。

   型枠工事＝「コンクリートの型／図面・青焼きの世界」というメタファーに基づく配色。
   ゴールド高級路線ではなく、コンクリート・グレー基調 × 青焼き（ブループリント）の
   スチールブルーで、高級感と技術的信頼感を出す。ダーク主体。
   ============================================================ */

:root {
  /* --- スペーシング（キット正本・完全踏襲） ---------------------- */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  32px;
  --spacing-xl:  48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;   /* セクション標準余白 */

  /* --- フォントサイズ（キット正本・踏襲） ------------------------ */
  --font-size-hero:  64px;
  --font-size-h1:    48px;
  --font-size-h2:    36px;
  --font-size-h3:    24px;
  --font-size-body:  16px;
  --font-size-small: 14px;
  --font-size-label: 12px;

  /* --- トランジション（キット正本・踏襲） ------------------------ */
  --transition-base:    0.2s ease;
  --transition-default: 0.3s ease;
  --transition-slow:    0.45s ease;

  /* --- フォント（和モダン3層） ----------------------------------- */
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;      /* 見出し日本語（明朝） */
  --font-jp-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;          /* 本文日本語 */
  --font-en-serif: "Cormorant Garamond", "Cinzel", serif;                             /* 英字ラベル（セリフ） */
  --font-en-disp:  "Cinzel", "Cormorant Garamond", serif;                             /* 英字ディスプレイ見出し */

  /* --- カラー：キット互換8変数（header-nav 等が参照） ------------ */
  --color-primary:      #15181D;  /* 主色：コンクリート・インク（ほぼ黒） */
  --color-accent:       #5E8BB0;  /* アクセント：青焼きスチールブルー */
  --color-accent-light: #7FB2D6;  /* 青焼きライン（明） */
  --color-text-dark:    #1A1D22;  /* 明色セクションの本文 */
  --color-text-gray:    #6B7280;  /* 補足テキスト（明色上） */
  --color-bg-white:     #FFFFFF;  /* 明色セクション背景 */
  --color-bg-light:     #F4F5F6;  /* 明色セクション（交互） */
  --color-bg-dark:      #15181D;  /* 暗色セクション背景 */
  --color-line:         #E3E5E8;  /* 罫線（明色上） */

  /* --- カラー：ダーク世界観の追加トークン ------------------------ */
  --color-ink:        #15181D;    /* 最暗（ヒーロー・フッター） */
  --color-ink-2:      #1D222B;    /* ダークセクション面 */
  --color-ink-3:      #272E39;    /* ダークカード面 */
  --color-text-light: #E9ECEF;    /* 暗色上の本文 */
  --color-text-mute:  #99A2AE;    /* 暗色上の補足 */
  --color-line-dark:  rgba(255, 255, 255, 0.12);  /* 暗色上の罫線 */
  --color-blueprint:  #7FB2D6;    /* 青焼き図面ライン */
  --color-blueprint-dim: rgba(127, 178, 214, 0.28); /* 青焼き薄線・グリッド */

  /* --- 協力会社セクション専用の暖色アクセント（現場の温かみ） ----- */
  --color-warm:       #C0894A;    /* 銅／琥珀（Partners CTA のみ） */
  --color-warm-light: #D8A667;

  /* --- レイアウト ------------------------------------------------ */
  --container:      1200px;
  --container-wide: 1400px;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* reveal 用のイージング */
  --header-h:  76px;
}

/* --- モバイルで見出しスケールを縮小（キット流儀） --------------- */
@media (max-width: 768px) {
  :root {
    --font-size-hero: 40px;
    --font-size-h1:   32px;
    --font-size-h2:   26px;
    --font-size-h3:   20px;
    --spacing-4xl:    88px;
    --spacing-3xl:    64px;
  }
}