:root{
  --color-primary:#0ea5e9;
  --radius:12px;
  --space-2:8px; --space-4:16px; --space-6:24px;
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}
/* テスト：カードや検索ボックスの枠色にブランド色を使う */
.card{ border:1px solid var(--color-primary); }
.search__input{ border:1px solid var(--color-primary); }

/*マイベスト以下
:root{
  /* brand */
  --color-primary:#0ea5e9;            /* アクセント（ボタン/リンク） */
  --color-primary-600:#0284c7;
  --color-accent:#f59e0b;             /* ランク徽章(1位の金) */
  --color-ok:#10b981;                 /* “おすすめ”バッジ */

  /* text & surfaces */
  --color-text:#111827;
  --color-muted:#6b7280;
  --color-border:#e5e7eb;
  --color-bg:#ffffff;
  --color-bg-sub:#f9fafb;

  /* radius & shadow */
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 24px rgba(0,0,0,.08);

  /* spacing (8px scale) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;

  /* font size (clamp) */
  --fs-xs:clamp(12px,2.2vw,12px);
  --fs-sm:clamp(13px,2.4vw,14px);
  --fs-md:clamp(14px,2.6vw,16px);
  --fs-lg:clamp(18px,3.4vw,20px);
  --fs-xl:clamp(22px,4vw,28px);
}