/* ==========================================================================
   tokens.css
   CSS Design System Guide 準拠 / CC-Dash
   既存CSS（common.css / parts.css / home.css）に使われている実値を
   トークンとして定義。CSSからは var(--xxx) 経由で参照する
   ========================================================================== */

:root {
  /* ==========================================================================
     Color - Brand
     既存CSS で確認された #068e62 / #7ecb9c / #f2f7f3 を中心に、
     前後の段階を補完した 9 段階スケール
     ========================================================================== */
  --c-brand-900: #055a3e; /* 濃い：強調・ホバー */
  --c-brand-800: #068e62; /* ★メイン（既存ロゴ・ボタン・リンク） */
  --c-brand-700: #399f77; /* 明るめ：ホバー用 */
  --c-brand-600: #5bb48d;
  --c-brand-300: #7ecb9c; /* ★アクセント（既存 tmpl_btn_third、境界線、ドロップダウン） */
  --c-brand-200: #b3ddc5;
  --c-brand-100: #d9ecdf;
  --c-brand-50:  #f2f7f3; /* ★薄緑背景（既存ナビ・フッター・囲み） */

  /* Neutral */
  --c-text:        #000000; /* 本文（既存純黒） */
  --c-text-muted:  #666666; /* キャプション（既存 figcaption） */
  --c-text-subtle: #999999; /* プレースホルダ・弱い情報（既存 input placeholder） */
  --c-text-cite:   #808080; /* 引用元表記（既存 tmpl_cite_source） */
  --c-text-invert: #ffffff;

  --c-bg:     #ffffff;
  --c-bg-alt: #f8f8f8; /* 薄グレー背景 */
  --c-bg-ededed: #ededed; /* スペーサー背景色 */
  --c-line:   #e6e6e6; /* 区切り線（既存 hr） */
  --c-border: #cccccc; /* フォーム枠（既存 input border） */
  --c-border-light: #b3b3b3; /* 弱い枠線（既存 radio） */

  /* State */
  --c-error:    #d63056; /* エラー赤 */
  --c-error-bg: #fff5f9; /* エラー背景ピンク */
  --c-warning:  #f7ff91;

  /* ==========================================================================
     Typography - Family
     ========================================================================== */
  --ff-base: "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --ff-num:  "Montserrat", sans-serif; /* 既存 copyright・page_mv_category で使用 */
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weight */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ==========================================================================
     Typography - Size
     既存は html font-size: 10px ベースで rem 運用。そのまま継承
     ========================================================================== */
  --fs-base:    1.6rem;   /* 16px：既存本文 */
  --fs-small:   1.4rem;   /* 14px：SP 本文、caption */
  --fs-caption: 1.2rem;   /* 12px：SP copyright 等 */
  --fs-lead:    1.8rem;   /* 18px：既存 tmpl_btn、tmpl_section_lead */
  --fs-h2:      3.2rem;   /* 32px：既存 tmpl_heading2（SP 2.2rem） */
  --fs-h2-sp:   2.2rem;
  --fs-h3:      2.4rem;   /* 24px：既存 tmpl_heading3（SP 1.8rem） */
  --fs-h3-sp:   1.8rem;
  --fs-h4:      2rem;     /* 20px：既存 tmpl_heading4（SP 1.6rem） */
  --fs-h4-sp:   1.6rem;
  --fs-mv:      4rem;     /* 40px：MV 見出し（SP 2.8rem） */
  --fs-mv-sp:   2.8rem;
  --fs-btn-lg:  2rem;     /* 20px：tmpl_btn--large（SP 1.8rem） */
  --fs-btn-sm:  1.6rem;   /* 16px：tmpl_btn--small（SP 1.4rem） */

  /* Line-height */
  --lh-tight:   1.3;
  --lh-heading: 1.3;  /* 既存 h1-h5 */
  --lh-body:    1.7;  /* 既存 body */

  /* Letter-spacing */
  --tr-body:    0.04em; /* 既存 body */

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --sp-1: 0.5rem;   /*  5px */
  --sp-2: 1rem;     /* 10px */
  --sp-3: 1.5rem;   /* 15px */
  --sp-4: 2rem;     /* 20px */
  --sp-5: 2.5rem;   /* 25px */
  --sp-6: 3rem;     /* 30px */
  --sp-7: 4rem;     /* 40px */
  --sp-8: 6rem;     /* 60px */
  --sp-9: 8rem;     /* 80px */

  /* ==========================================================================
     Container - 既存 1240px 準拠
     ========================================================================== */
  --container-max: 1240px; /* ★既存 tmpl_inner */
  --container-pad: 2rem;   /* 既存 padding 0 2rem */

  /* ==========================================================================
     Radius - 既存の丸みを継承
     ========================================================================== */
  --r-sm:     4px;
  --r-md:     8px;   /* ★ボタン・入力 */
  --r-lg:    16px;   /* ★カード・figure */
  --r-xl:    24px;   /* ★MV */
  --r-sp:    10px;   /* ★SP 時の lg 代替 */
  --r-sp-md: 12px;   /* SP 時の xl 代替 */
  --r-pill: 999px;

  /* ==========================================================================
     Shadow - 既存のグリーン系フラット投影
     ========================================================================== */
  --sh-card:    3px 3px 0 rgba(55, 152, 96, 0.1);
  --sh-card-sp: 2px 2px 0 rgba(55, 152, 96, 0.1);

  /* ==========================================================================
     Motion - 既存 .3s ease-out
     ========================================================================== */
  --ease: ease-out;
  --dur:  0.3s;

  /* ==========================================================================
     Header / Footer
     ========================================================================== */
  --header-h:    60px; /* PC ヘッダー高 */
  --header-h-sp: 50px; /* SP ヘッダー高 */

  /* ==========================================================================
     Z-index
     ========================================================================== */
  --z-header: 100;
  --z-menu:    60;
  --z-pagetop: 50;
}