/* =============================================================
   tokens.css  ―  社会福祉法人 松壽会
   色・フォント・余白・角丸などの設計トークン。
   ここ以外の場所に色や余白の生値をハードコードしないこと。
   ============================================================= */

:root {
  /* ---- 色：地 ---------------------------------------------- */
  --color-bg:        #fbfaf7; /* 基本背景（温かみのある白） */
  --color-bg-alt:    #eef1ec; /* セクション交互用の淡い緑みグレー */
  --color-bg-deep:   #244c40; /* 理念・CTA などの濃色地 */
  --color-bg-deep-2: #1d4034; /* 濃色地のさらに深い版 */

  /* ---- 色：文字 -------------------------------------------- */
  --color-ink:       #22302c; /* 本文（ほぼ黒の緑みグレー） */
  --color-ink-soft:  #4a564f; /* 補助テキスト */
  --color-ink-inv:   #f4f6f2; /* 濃色地の上の文字 */
  --color-ink-inv-soft: #c8d3cc; /* 濃色地の上の補助テキスト */

  /* ---- 色：ブランド ---------------------------------------- */
  --color-primary:      #2f6b57; /* 主要（緑） リンク・見出しアクセント */
  --color-primary-dark: #1f5041; /* ホバー等 */
  --color-primary-tint: #e3ece7; /* 淡い面 */

  /* 採用ボタン専用のアクセント（他と色を変えて独立させる指定） */
  --color-accent:       #b04d16; /* 温かいオレンジ */
  --color-accent-dark:  #8f3e10;

  /* ---- 線・面 ---------------------------------------------- */
  --color-line:      #dcded6; /* 罫・境界 */
  --color-line-soft: #e8e9e2;
  --color-card:      #ffffff; /* カード面 */

  /* ---- フォーカス ------------------------------------------ */
  --color-focus:     #1f5041;

  /* ---- フォント -------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI",
               Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                "Noto Serif JP", serif;

  /* ---- タイポグラフィ -------------------------------------- */
  --text-base:  1.0625rem; /* 本文 17px（15px 以下にしない） */
  --text-sm:    0.9375rem; /* 補助 15px */
  --text-lg:    1.1875rem;
  --leading-body:    1.8;
  --leading-heading: 1.35;
  --para-gap:   1.5em;     /* 段落間 */

  /* ---- 余白（8px グリッド） -------------------------------- */
  --space-1:  0.5rem;   /*  8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  3rem;     /* 48px */
  --space-6:  4rem;     /* 64px  セクション上下の最小 */
  --space-7:  5rem;     /* 80px */
  --space-8:  6rem;     /* 96px */

  /* 本文左右の最小 padding（20px 以上の指定） */
  --gutter:   1.25rem;  /* 20px */

  /* ---- レイアウト ------------------------------------------ */
  --container:      68rem;  /* 1088px 通常コンテンツ最大幅 */
  --container-text: 42rem;  /* 672px  読み物の1行文字数を抑える幅 */
  --header-h:       3.75rem; /* 60px 固定ヘッダー高 */

  /* ---- 角丸 ------------------------------------------------ */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- 影 -------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(31, 42, 40, 0.06),
               0 2px 8px rgba(31, 42, 40, 0.05);
  --shadow:    0 4px 16px rgba(31, 42, 40, 0.09);

  /* ---- タップ領域 ------------------------------------------ */
  --tap: 44px; /* 最低タップサイズ */

  /* ---- 動き ------------------------------------------------ */
  --ease: cubic-bezier(0.4, 0.1, 0.2, 1);
  --dur:  180ms;
}