@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* アプリ全体とセレクトボックスに「絶対にダークモードにしろ」と強制命令 */
:root {
  color-scheme: dark !important;
}

/**
 * style.css — BAR Strategic Price & Profit Manager
 * ダークモードデザインシステム
 * カラーパレット: 深黒 #0D0D12 × アンバー #F5A623
 */

/* ============================================================
   CSS変数（デザイントークン）
   ============================================================ */
:root {
  /* ベースカラー */
  --bg-base: #121212;
  --bg-surface: #17181f;
  --bg-card: #1d1f27;
  --bg-elevated: #252835;
  --bg-modal: #13141Cee;

  /* ★ここに追加：店舗テーマカラー（JSから動的に変更） */
  --store-theme-color: #F5A623;

  /* アクセントカラー */
  --amber: #F5A623;
  --amber-light: #FFD080;
  --amber-dim: rgba(245, 166, 35, 0.15);

  /* テキスト */
  --text-primary: #E8E8EE;
  --text-secondary: #A0A8B8;
  --text-muted: #5A6275;

  /* レア度カラー */
  --rarity-s: #FF6B35;
  --rarity-a: #F5A623;
  --rarity-b: #4CAF8A;
  --rarity-c: #7B8FA1;

  /* ステータスカラー */
  --success: #4CAF8A;
  --warning: #F5A623;
  --danger: #E05555;

  /* ボーダー・シャドウ */
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(245, 166, 35, 0.35);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(245, 166, 35, 0.2);

  /* レイアウト */
  --nav-height: 64px;
  --header-height: 56px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* トランジション */
  --transition: 0.2s ease;
}