/* ============================================================
   関西テクノデザイン (Kansai Techno Design / KTD)
   デザイントークン定義ファイル
   ------------------------------------------------------------
   このファイルの変数値を変更するだけで、サイト全体の配色・
   フォント・角丸・余白のルールを一括で変更できます。
   後からデザインを変更する際は、まずこのファイルを編集してください。

   本バージョンは「DESIGN-starbucks.md」のデザインシステムを
   参考に、KTDのロゴグリーンを基調とした4段階グリーン体系・
   暖色クリーンキャンバス・フルピルボタン・多層ソフトシャドウを
   採用しています。
   ============================================================ */

:root {
  /* ---------- カラー：4段階グリーン体系 ---------- */
  /* Starbucksの「単一ブランドグリーンを使わない」思想を採用し、
     役割ごとに濃淡4段階のグリーンを使い分ける。 */
  --green-primary:   #1F6F3E;   /* 見出し・ブランドシグナル（Starbucks Greenの役割） */
  --green-accent:    #277645;   /* CTAボタン塗り・主要アクション（Green Accentの役割／白文字でAA確保） */
  --green-house:     #16302A;   /* 濃色帯・フッター背景（House Greenの役割） */
  --green-uplift:    #2B5148;   /* 装飾・グラデーション的アクセント（控えめ使用） */
  --green-light:     #DCEEE2;   /* フォーム正常状態・淡色ウォッシュ */

  /* ---------- カラー：ゴールド（特急・優良案件などの“儀式的”用途のみ） ---------- */
  --gold:            #B8924F;
  --gold-light:      #DCC59A;
  --gold-lightest:   #FAF5EC;

  /* ---------- カラー：基本トークン（既存コンポーネントとの互換のため名称を維持） ---------- */
  --color-bg:           #FAF8F2;   /* 基本背景＝暖色クリーム（純白を避ける） */
  --color-bg-soft:      #F1EEE6;   /* セクション背景＝セラミック寄りクリーム */
  --color-bg-dark:      var(--green-house); /* 濃色セクション背景（フッター等） */

  --color-ink:          rgba(20, 24, 21, 0.87);   /* 本文・見出し色（純黒を避けた87%濃度） */
  --color-ink-soft:     rgba(20, 24, 21, 0.58);   /* サブテキスト */
  --color-ink-faint:    rgba(20, 24, 21, 0.40);   /* キャプション・補足 */

  --color-accent:       var(--green-accent);   /* メインアクセント（小要素・ボーダー用） */
  --color-accent-dark:  var(--green-primary);  /* 濃色アクセント（本文・見出し用） */
  --color-accent-soft:  var(--green-light);    /* 淡いアクセント背景 */

  --color-line:         #E4DFD2;   /* ボーダー・区切り線（暖色グレー） */
  --color-line-strong:  #D2CBB8;   /* 強調ボーダー */

  --color-white:        #FFFFFF;
  --color-overlay:      rgba(15, 20, 17, 0.55); /* 画像上のテキスト用オーバーレイ */
  --color-header-bg:    rgba(250, 248, 242, 0.92); /* ヘッダー半透明背景（クリームの半透明版） */

  /* ---------- フォント ---------- */
  /* SoDoSansは非公開フォントのため、近い性格を持つInterで代替。
     Noto Sans JPを日本語側のベースとして組み合わせる。 */
  --font-display: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body:    "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono:    "Roboto Mono", "Noto Sans JP", monospace;

  --fw-black:  700;   /* Starbucks系は太字でも700止まり（900は使わない） */
  --fw-bold:   600;
  --fw-medium: 500;
  --fw-regular:400;

  /* ---------- タイプスケール ---------- */
  --fs-hero:    clamp(2.2rem, 5vw, 4rem);
  --fs-h1:      clamp(1.9rem, 3.6vw, 2.6rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 1.9rem);
  --fs-h3:      clamp(1.15rem, 1.8vw, 1.35rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* ---------- 文字間隔（タイトな字詰めが特徴） ---------- */
  --tracking-tight: -0.01em;
  --tracking-loose: 0.1em;

  /* ---------- 角丸：フルピル統一 ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;     /* 小要素用 */
  --radius-lg: 12px;    /* カード半径（Starbucks系の12px基準・サイト全体のカードで使用） */
  --radius-pill: 50px;   /* ボタンは例外なくフルピル */

  /* ---------- 余白：rem基準セマンティックスケール ---------- */
  --space-xs:  0.8rem;   /* 8px */
  --space-sm:  1.6rem;   /* 16px ― 基準単位 */
  --space-md:  2.4rem;   /* 24px */
  --space-lg:  4.8rem;   /* 48px */
  --space-xl:  6.4rem;   /* 64px */

  /* ---------- レイアウト ---------- */
  --container-w: 1140px;
  --container-pad: 1.6rem;

  /* ---------- シャドウ：低アルファを2〜3層に重ねる ---------- */
  --shadow-sm: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.10), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07);
  --shadow-lg: 0 0 6px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.12);

  /* ---------- トランジション ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-mid:  0.32s;

  /* ---------- ボタン押下時の縮小（シグネチャー・マイクロインタラクション） ---------- */
  --button-active-scale: scale(0.96);
}