:root {
  /* ===== Colors (Figma準拠) ===== */
  --color-bg:        #ffffff;
  --color-text:      #231815;
  --color-text-sub:  #938686;
  --color-red:       #c40805;   /* Design Your own Trip / JP active */
  --color-border:    #e0dcd8;
  --color-overlay:   rgba(0, 0, 0, 0.5);
  --color-btn-book:  #fff947;   /* Roomのご予約 / BOOK Room ボタン */
  --color-btn-book-shadow: #b2b2b2;

  /* ===== Typography (Figma準拠) ===== */
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-en:   'Noto Sans JP', sans-serif;
  --font-base: var(--font-sans);

  --fz-xs:   0.75rem;   /* 12px */
  --fz-sm:   0.875rem;  /* 14px */
  --fz-md:   1rem;      /* 16px */
  --fz-lg:   1.125rem;  /* 18px */
  --fz-xl:   1.5rem;    /* 24px */

  --lh-tight:  1.3;
  --lh-normal: 1.7;
  --lh-loose:  2.0;

  /* ===== Spacing ===== */
  --sp-xs:   0.5rem;    /* 8px */
  --sp-sm:   1rem;      /* 16px */
  --sp-md:   1.5rem;    /* 24px */
  --sp-lg:   2.5rem;    /* 40px */
  --sp-xl:   4rem;      /* 64px */
  --sp-2xl:  6rem;      /* 96px */

  /* ===== Layout ===== */
  --gutter:           35px;     /* Figmaの左右マージン */

  /* ===== Breakpoints (参照用) ===== */
  /* Mobile: < 768px  */
  /* Tablet: 768px〜  */
  /* PC:    1024px〜  */

  /* ===== Transitions ===== */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ===== Z-index ===== */
  --z-header:  100;
  --z-popup:   200;
}