/* =====================================================================
   tokens.css ── FROM NOW（レンタルサロン）提案デモ
   明るい黄色基調・親しみのある現サイト寄りトーン。色3系統60:30:10／フォント3種。
   ===================================================================== */
:root {
  /* --- 色：黄色(ブランド)＋ダークブラウン(文字)＋明るいクリーム(地)｜60:30:10 --- */
  --c-bg:     #FFFBEF;   /* 明るいクリーム（ほんのり黄）：背景60% */
  --c-text:   #3A3327;   /* 本文：温かいダークブラウン（AA） */
  --c-main:   #F7B500;   /* ブランドの黄（CTA・帯・バッジ等の“面”に。文字は濃色を乗せる）30% */
  --c-main-dark: #2E2A20;/* 濃色：見出し・フッター地・ロゴ・黄の上に乗せる文字 */
  --c-accent: #E0A100;   /* アクセントの琥珀（罫・マーク・装飾。クリーム上でも視認可）10% */
  --c-accent-dk:  #8C6400;/* 文字アクセント：リンク・ラベル・番号（クリーム上でAA） */
  --c-accent-dk2: #E0A100;/* 黄ボタンのhover（一段濃い黄） */
  --c-line:   #EFE6CE;   /* 罫線：淡いクリーム */

  /* 拡張色 */
  --c-bg-card:   #FFFFFF;
  --c-bg-soft:   #FFF4D2;   /* やわらかい黄の面（交互セクション・チップ） */
  --c-text-sub:  #6E6552;
  --c-line-btn:    #06C755; /* LINE公式グリーン：LINEに繋がるボタン */
  --c-line-btn-dk: #05A648; /* LINEボタンのhover */

  /* --- 余白スケール（8の倍数）--- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

  /* --- 形 --- */
  --radius: 8px;
  --shadow: 0 2px 8px rgba(120, 90, 0, .08);

  /* --- フォント（3種）：見出し=丸ゴ/本文=角ゴ/欧文=Poppins --- */
  --ff-head: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --ff-body: "Zen Kaku Gothic New", system-ui, sans-serif;
  --ff-en:   "Poppins", "Zen Maru Gothic", sans-serif;

  /* --- 文字：ジャンプ率大・本文16px・行間1.8 --- */
  --fz-h1:   clamp(2rem, 6vw, 3.3rem);
  --fz-h2:   clamp(1.5rem, 3.5vw, 2.2rem);
  --fz-body: 1rem;
  --lh-body: 1.85;

  /* --- レイアウト幅 --- */
  --container: 1100px;
}