/* ==========================================================================
   Dog Salon Puppy - Design Tokens (CSS Custom Properties)
   biophilia型 1カラム縦スクロール構成

   リキッド方式:
   1440px以上 → 10px固定（62.5%）
   1440px以下 → 0.6944vw（1440で10px、線形縮小）
   767px以下  → 2.6667vw（375で10px、線形縮小）
   全remが html font-size に連動して自動スケール。個別clamp不要。
   ========================================================================== */

:root {
  /* ---------- Color ---------- */
  --color-bg: #FFFFFF;
  --color-bg-soft: #FAFAF8;
  --color-bg-muted: #F7F7F7;
  --color-text: #2A2826;
  --color-text-sub: #5A5757;
  --color-text-muted: #939393;
  --color-border: #E5E5E5;
  --color-border-soft: #EEECE8;

  --color-accent: #EF454A;
  --color-accent-hover: #D93A3F;
  --color-accent-soft: #FAF8F3;
  --color-accent-bg: #F7F2EB;

  --color-line: #06C755;
  --color-line-hover: #05A647;

  --color-footer-bg: #30302E;
  --color-footer-text: #EAEAEA;
  --color-footer-muted: #9A9A97;

  /* ---------- Typography ---------- */
  --font-jp-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-jp-serif: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Font Size（単純rem。vwスケールは html font-size が担う） */
  --fs-hero: 5.6rem;
  --fs-h1: 3.8rem;
  --fs-h2: 3.2rem;
  --fs-h3: 2.2rem;
  --fs-lead: 1.8rem;
  --fs-body: 1.6rem;
  --fs-small: 1.4rem;
  --fs-eyebrow: 1.3rem;

  /* Line height */
  --lh-heading: 1.5;
  --lh-body: 1.75;
  --lh-tight: 1.35;

  /* Letter spacing */
  --ls-heading: 0.08rem;
  --ls-body: 0.06rem;
  --ls-eyebrow: 0.2rem;

  /* Font weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Spacing (8pxグリッド) ---------- */
  --sp-1: 0.8rem;
  --sp-2: 1.6rem;
  --sp-3: 2.4rem;
  --sp-4: 3.2rem;
  --sp-5: 4.0rem;
  --sp-6: 4.8rem;
  --sp-8: 6.4rem;
  --sp-10: 8.0rem;
  --sp-12: 9.6rem;
  --sp-14: 11.2rem;
  --sp-16: 12.8rem;

  /* ---------- Layout ---------- */
  --container-width: 132rem;
  --container-narrow: 96rem;
  --pad-side-pc: 4.0rem;
  --pad-side-sp: 2.0rem;

  /* Section vertical padding */
  --section-py-pc: 11.2rem;
  --section-py-sp: 6.4rem;

  /* Header */
  --header-h-pc: 8.8rem;
  --header-h-sp: 6.4rem;

  /* SP bottom CTA bar */
  --sp-cta-h: 5.6rem;

  /* ---------- Radius ---------- */
  --radius-sm: 0.6rem;
  --radius-md: 1.0rem;
  --radius-lg: 1.6rem;
  --radius-pill: 999rem;

  /* ---------- Motion ---------- */
  --duration-fast: 0.18s;
  --duration-base: 0.35s;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- Z-index ---------- */
  --z-header: 50;
  --z-nav: 60;
  --z-fab: 40;
  --z-modal: 80;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 0.1rem 0.2rem rgba(42, 40, 38, 0.05);
  --shadow-md: 0 0.6rem 2.0rem rgba(42, 40, 38, 0.08);
}

/* ---------- Breakpoint 767px 以下はSP上書き ---------- */
@media (max-width: 767px) {
  :root {
    --section-py-pc: var(--section-py-sp);
  }
}