/* 色・フォント・形の共通定義。部品側では値を直書きせず、必ずここの変数を使う。
   色味を変えるときはこのファイルだけを差し替える。 */
:root {
  /* 地と文字 */
  --c-bg: #ffffff;
  --c-surface: #f5f5f4;      /* 画像の地・帯の地・セクションの地 */
  --c-surface-2: #ebebea;    /* 帯の未選択部分 */
  --c-ink: #111111;          /* 文字・主要な線 */
  --c-ink-2: #565959;        /* 補足の文字 */
  --c-ink-3: #8a8f8f;        /* 薄い補足（単位・ラベル） */
  --c-line: #e3e3e3;
  /* ヘッダー・フッター：Pickle K の HP と同じ肌色・紺。別ドメインへ移しても HP の CSS に依存しないよう、値をここに持つ */
  --c-navy: #1f3a8a;
  --c-hd-bg: #fbf6ec;
  --c-hd-ink: #282828;
  --c-hd-line: #e3d8be;
  --c-hd-field: #d6caa8;
  --c-ft-bg: #1f3a8a;
  --c-ft-ink: #fbf6ec;

  /* アクセント（Amazon で見慣れた黄・オレンジ） */
  --c-cta: #ffd814;          /* 主ボタンの地 */
  --c-cta-hover: #f7ca00;
  --c-cta-ink: #111111;
  --c-accent: #ff9900;       /* 帯の「このパドル」の位置・強調 */
  --c-accent-ink: #b45309;   /* 白地に載せるオレンジの文字（小さい文字はこちら） */
  --c-accent-soft: #fff4e0;  /* 強調ラベルの地 */

  /* 対象レベル（はじめて→上級で濃くなる。上級は黒に近い紺にして、明るい青が初心者向けに見えないようにする） */
  --c-lv1: #dbeafe;  --c-lv1-ink: #1e3a8a;
  --c-lv2: #60a5fa;  --c-lv2-ink: #0b1f4d;
  --c-lv3: #1e3a8a;  --c-lv3-ink: #ffffff;

  /* 意味の色 */
  --c-link: #007185;
  --c-ok: #067d62;           /* 店頭にある */
  --c-wait: #565959;         /* 取り寄せ */

  /* 文字 */
  --font-base: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 15px;
  --fs-l: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-price: 22px;

  /* 形 */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-pill: 999px;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .14);
  --shadow-bar: 0 2px 8px rgba(0, 0, 0, .08);
  --gutter: 16px;
  --toolbar-h: 52px;
}
@media (min-width: 992px) {
  :root { --gutter: 32px; }
}