/* ============================================
   プロテインコスパ比較 — デザイントークン
   仕様書 §12: 白背景・黒文字、アクセントは緑(コスパ)とオレンジ(CTA)の2色のみ
   ============================================ */
:root {
  /* Color — brand */
  --color-green-50:  #f0faf2;
  --color-green-100: #dcf3e1;
  --color-green-500: #1e9e50;
  --color-green-600: #15803d; /* テキスト用 (白地でコントラスト4.5:1以上) */
  --color-green-700: #116532;

  --color-orange-50:  #fff4ec;
  --color-orange-100: #ffe6d5;
  --color-orange-500: #ea5b0c; /* CTAボタン背景 */
  --color-orange-600: #c2410c; /* テキスト用 */
  --color-orange-700: #9a3412;

  /* Color — neutral */
  --color-bg:        #ffffff;
  --color-bg-soft:   #f7f8f7;
  --color-text:      #17211a;
  --color-text-sub:  #5b665e;
  --color-text-faint:#8a948c;
  --color-border:    #e3e7e4;
  --color-border-strong: #c8cfc9;

  /* Color — semantic */
  --color-star: #f5a623;
  --color-danger: #c0392b;

  /* Typography */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-num: "Helvetica Neue", Arial, var(--font-sans);
  --text-xs: 0.75rem;   /* 12px 補足 */
  --text-sm: 0.8125rem; /* 13px ラベル */
  --text-md: 0.9375rem; /* 15px 本文 */
  --text-lg: 1.125rem;  /* 18px 小見出し */
  --text-xl: 1.5rem;    /* 24px 見出し */
  --text-2xl: 2rem;     /* 32px ヒーロー */
  --text-num-hero: 1.75rem; /* カード内 価格/g 最大サイズ */

  /* Spacing (4pxベース) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Border radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;

  /* Shadow (控えめ) */
  --shadow-card: 0 1px 3px rgba(23, 33, 26, 0.07);
  --shadow-pop:  0 4px 16px rgba(23, 33, 26, 0.13);

  /* Motion */
  --dur-fast: 120ms; --dur-base: 200ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --container: 1080px;
}