/* ============================================================
   KAPIBARAN 公式EC UIデザイン
   Palette B : Warm Sage  ★ 採用パレット
   version: v0.3 / 2026-07-30
   design-token-manifest-b.json と1対1で対応
   ============================================================ */
:root {
  /* color */
  --color-background: #F6F3ED;
  --color-surface: #FFFFFF;
  --color-foreground: #1F1E1C;
  --color-border: #E4DFD3;
  --color-accent: #3E5B4A;
  --color-accent-hover: #334C3D;
  --color-accent-foreground: #FFFFFF;
  --color-accent-relax: #3E5B4A;
  --color-link: #1F5A6B;
  --color-success: #3D7A4E;
  --color-warning: #A86A00;
  --color-error: #A82820;
  --color-disabled: #B4B0A6;
  --color-focus-ring: #3E5B4A;

  /* typography */
  --typography-font-family-base: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --typography-h1-size: 56px;
  --typography-h1-size-mobile: 40px;
  --typography-h1-line: 1.25;
  --typography-h1-weight: 700;
  --typography-h1-tracking: 0.04em;

  --typography-h2-size: 40px;
  --typography-h2-size-mobile: 30px;
  --typography-h2-line: 1.3;
  --typography-h2-weight: 700;
  --typography-h2-tracking: 0.04em;

  --typography-h3-size: 28px;
  --typography-h3-size-mobile: 22px;
  --typography-h3-line: 1.35;
  --typography-h3-weight: 600;
  --typography-h3-tracking: 0.03em;

  --typography-h4-size: 20px;
  --typography-h4-size-mobile: 18px;
  --typography-h4-line: 1.4;
  --typography-h4-weight: 600;
  --typography-h4-tracking: 0.03em;

  --typography-body-size: 16px;
  --typography-body-line: 1.75;
  --typography-body-weight: 400;
  --typography-body-tracking: 0.03em;

  --typography-caption-size: 13px;
  --typography-caption-line: 1.6;
  --typography-caption-weight: 400;
  --typography-caption-tracking: 0.03em;

  /* spacing (unit=4px) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-9: 96px;

  /* radius */
  --radius-button: 2px;
  --radius-card: 4px;
  --radius-input: 2px;

  /* shadow */
  --shadow-card: 0 1px 2px rgba(31, 30, 28, 0.04), 0 2px 8px rgba(31, 30, 28, 0.04);
  --shadow-drawer: 0 0 0 1px rgba(31, 30, 28, 0.06), -8px 0 24px rgba(31, 30, 28, 0.08);

  /* container */
  --container-max-width: 1280px;
  --container-padding-desktop: 32px;
  --container-padding-mobile: 16px;

  /* breakpoint */
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 750px;
  --breakpoint-desktop: 990px;

  /* price (Q-G4: 税込表記の自動付与用) */
  --price-tax-suffix: "（税込）";
}