/* ============================================================
   KABUKI Design Tokens
   出典: Figma「カブキコーポレートサイト」変数定義（2026-07-21 取得）
   このファイルが Figma と実装の唯一の対応点。
   他の CSS では色・フォント値を直書きせず、必ず var() を参照する。
   ============================================================ */

:root {
  /* ---- Colors (Figma: KABUKI/*) ---- */
  --color-white: #FFFFFF;   /* KABUKI/White */
  --color-black: #0D0D0D;   /* KABUKI/Black */
  --color-red:   #DA0000;   /* KABUKI/Red — #C41E3A ではない（2026-07-21 確定） */
  --color-gray:  #E5E5E5;   /* KABUKI/Gray（罫線・背景） */
  --color-bg-section: #F7FBF9;  /* 淡い節背景・入力欄地（2026-07-29追加。Figmaで各所に生値多用） */
  --color-gray-text: #8E8E93;   /* Grays/Gray（補助テキスト） */
  --color-gray-light: #C7C7CC;  /* Grays/Gray 3 */
  --color-logo: #231815;        /* ロゴ SVG のインク色（Figma 書き出し実測。--color-black とは別） */
  --color-table-border: #CCCCCC;  /* 2026-07-29追加。Figma変数「Fills - Vibrant/Primary」（get_variable_defsで実在確認済み）。表・カードの標準罫線 */
  --color-border-mid: #B3B3B3;    /* 2026-07-29追加。一部の表/カード枠でFigma実測されるやや濃い罫線 */
  --color-footer-bg: #F9F9F9;     /* 2026-07-29追加。確定版フッター(node 640:3329 Component 10)の背景実測値。get_design_context で bg-[#f9f9f9]、スクリーンショットのピクセルサンプルでも rgb(249,249,249) を確認。純白(--color-white)ではない */

  /* ---- Typography ---- */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Montserrat", sans-serif;

  /* Figma テキストスタイルの実サイズ（px）。
     注意: Figma 変数「18px-Regular」の実サイズは 22px（デザイン側の命名ずれ）。
     ここでは実サイズ基準で定義する。 */
  --fs-10: 0.625rem;   /* 10px（2026-07-29追加。必須バッジ等） */
  --fs-12: 0.75rem;    /* 12px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-16: 1rem;       /* 16px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px（2026-07-29 追加。Figma実測でカード見出し等に多用） */
  --fs-22: 1.375rem;   /* 22px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-32: 2rem;       /* 32px */
  --fs-48: 3rem;       /* 48px */

  --lh-jp: 1.6;        /* Noto Sans JP 全スタイル共通（見出し・タイト・詰め用） */
  --lh-en: 1.5;        /* Montserrat 共通 */
  --lh-body: 1.8;      /* 2026-07-29追加。本文用（Figma実測で本文テキストが軒並み行間1.8） */
  --lh-loose: 2;        /* 2026-07-29追加。採用イントロ文など特に広い行間 */
  --lh-tight: 1.25;     /* 2026-07-29追加。AI-Driven「資産化」円など */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;  /* 2026-07-29追加 */
  --fw-bold: 700;

  /* ---- Layout ---- */
  --design-width-pc: 1440px;   /* Figma PC フレーム幅 */
  --design-width-sp: 393px;    /* Figma SP フレーム幅 */
  --content-max: 1280px;       /* l-container の外枠幅。l-container は padding-inline 40px を持つため、
                                  コンテンツ実幅は 1280 - 80 = 1200px（Figma実測のコンテンツ幅 1200 と一致）。
                                  旧1200だと padding 二重取りで実幅1120pxに縮む不具合があった（SOTA指摘 2026-07-29 修正）。 */
  --space-container-sp: 20px;  /* SP コンテナ左右余白（Figma SP_navi 実測） */
  --space-container-pc: 40px;  /* PC コンテナ左右余白（Figma Navigation 実測） */
  --radius-pill: 999px;        /* ボタン類の錠剤型角丸（Figma は高さ半分以上の個別値を使用） */
}

/* ブレークポイントは CSS 変数にできないため規約として固定:
   SP ファースト、@media (min-width: 768px) で PC レイアウトへ切替。 */