/*
 * assets/css/tokens.css
 *
 * Gadget Maniac デザイントークン。
 * Tailwindカスタム設定と同じ色・タイポグラフィ定義をCSS変数で提供する。
 * スクロールバー・共通アニメーションもここで定義。
 */

/* ベース文字間隔・見出し文字間隔 */
body {
  letter-spacing: 0.02em;
}

h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* 製品コード・スペック値は文字間隔ゼロ（数字・英字の判読性向上） */
.product-code,
.spec-value {
  letter-spacing: 0;
}

/* カスタムスクロールバー（Webkit系ブラウザ） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F1F3F6;
}

::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* モバイルタップハイライト除去 */
.tap-highlight-none {
  -webkit-tap-highlight-color: transparent;
}

/* モバイル下部ナビのiOS SafeArea対応 */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}