/* ===========================
   Design Tokens — v2
   =========================== */

:root {
  /* ---- Primary (Vivid Orange) ---- */
  --color-primary:       #F77622;   /* CTA・強調・枠線 */
  --color-primary-hover: #E55F0E;   /* ホバー */
  --color-primary-light: #FFE4D1;   /* 薄オレンジ・背景強調 */

  /* ---- Sub Accents ---- */
  --color-yellow:  #FFD93D;         /* ハイライト・装飾・星 */
  --color-blue:    #5DADE2;         /* 吹き出し補助色 */
  --color-pink:    #FFB6C1;         /* ほっぺ・点描装飾 */

  /* ---- Backgrounds ---- */
  --color-bg:         #FFFFFF;      /* 純白（奇数セクション） */
  --color-bg-cream:   #FFFCF5;      /* クリーム（偶数セクション） */
  --color-bg-soft:    #FFF8E7;      /* 暖かいクリーム（強みなど） */

  /* ---- Text ---- */
  --color-text:     #2A2520;        /* メインテキスト */
  --color-text-soft:#6B6358;        /* 補助テキスト・キャプション */
  --color-text-inv: #FFFFFF;        /* 反転テキスト */

  /* ---- Borders ---- */
  --color-border:      #FFD9B8;     /* 薄オレンジ枠 */
  --color-border-soft: #F0E5D5;     /* 補助枠 */

  /* ---- Pricing ---- */
  --color-price-strike: #C0A48A;    /* 取り消し線つき通常価格 */

  /* ---- Legacy aliases (後方互換) ---- */
  --color-bg-alt:       var(--color-bg-cream);
  --color-bg-warm:      var(--color-bg-soft);

  /* ---- Typography ---- */
  --font-round: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-pop:   'Mochiy Pop One', 'M PLUS Rounded 1c', sans-serif;
  --font-body:  'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  /* ---- Font Sizes ---- */
  --fs-h1:    clamp(28px, 5vw, 44px);
  --fs-h2:    clamp(22px, 3.5vw, 30px);
  --fs-h3:    clamp(17px, 2vw, 20px);
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    12px;
  --fs-price: clamp(30px, 4vw, 40px);

  /* ---- Spacing (8px base) ---- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  80px;
  --sp-9: 100px;

  --space-section: clamp(32px, 4vw, 50px);
  --space-inner:   clamp(16px, 2vw, 24px);

  /* ---- Layout ---- */
  --max-width: 1180px;
  --side-pad:  clamp(20px, 4vw, 40px);

  /* ---- Radius ---- */
  --radius-sm:   10px;
  --radius-md:   20px;
  --radius-lg:   24px;
  --radius-pill: 100px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 28px rgba(0, 0, 0, 0.08);
  --shadow-cta: 0 8px 24px rgba(247, 118, 34, 0.35);

  /* ---- Transitions ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  0.18s;
  --dur-mid:   0.28s;
  --dur-slow:  0.55s;
}