/*
 * tokens.css
 *
 * ネクストフェーズ デザイントークン。
 * Tailwind CDN のカスタム設定と同一の値を CSS カスタムプロパティで定義し、
 * components.css・pages/*.css から参照できるようにする。
 *
 * Tailwind の設定（tailwind.config）は inc/header.php の <script> で一元管理。
 * このファイルは Tailwind ユーティリティを補完するカスタムスタイルのみ保持する。
 */

/* -----------------------------------------------------------------------
   CSS カスタムプロパティ（デザイントークン）
----------------------------------------------------------------------- */
:root {
  /* ブランドカラー（Tailwind の brand.* に対応） */
  --cn-navy:        #0A3F7A;
  --cn-blue:        #005CAB;
  --cn-lightnavy:   #EEF4FA;
  --cn-green:       #10B981;
  --cn-lightgreen:  #E6F4EA;
  --cn-textdark:    #2D3748;
  --cn-textmuted:   #718096;

  /* 背景 */
  --cn-bg:          #F8FAFC;

  /* フォント */
  --cn-font-sans:   'Noto Sans JP', sans-serif;
  --cn-font-quick:  'Quicksand', sans-serif;
  --cn-font-logo:   'M PLUS Rounded 1c', sans-serif;

  /* フォーカスリング（ブランドブルー） */
  --cn-focus-ring:  rgba(0, 92, 171, 0.15);

  /* 送料無料しきい値（PHP 側と一致させる） */
  --cn-free-ship-threshold: 5500;
}

/* -----------------------------------------------------------------------
   ベーススタイル（全ページ共通）
   Tailwind の base layer を補完するカスタム調整のみ記述する。
----------------------------------------------------------------------- */

body {
  font-family: var(--cn-font-sans);
  color: var(--cn-textdark);
  background-color: var(--cn-bg);
}

/* ロゴ用フォント
 * Tailwind CDN は fontFamily 名にスペースを含むと .font-logo が空ルールになるため、
 * CSS 変数経由で明示指定する（Playwright 検証済み）。 */
.font-logo {
  font-family: var(--cn-font-logo);
}

/* フォーカスリング（input / select / textarea 共通） */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cn-blue);
  box-shadow: 0 0 0 3px var(--cn-focus-ring);
}

/* スクロールバーのカスタマイズ（Webkit） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* メガメニューのアニメーション */
.mega-menu-transition {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}