/* =================================================
   BASE.CSS — Reset · CSS Variables · Common Styles
   ================================================= */

/* --- Box Model Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--base);
  color: var(--brown);
  font-family: var(--font-sans-ja);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* --- CSS Custom Properties --- */
:root {
  /* Color Palette */
  --base:   #FAFAF6;  /* ベース背景 */
  --green:  #3A5C3A;  /* 森グリーン（メイン） */
  --amber:  #D4813A;  /* アンバー（アクセント・CTA） */
  --beige:  #E8DFC8;  /* サンドベージュ（サブ背景） */
  --brown:  #2C2018;  /* ダークブラウン（テキスト） */
  --stone:  #7A7060;  /* ストーン（サブテキスト） */
  --cream:  #FDF9F2;  /* クリーム（カード背景） */

  /* Typography */
  --font-serif-ja:  'Noto Serif JP', serif;
  --font-sans-ja:   'Noto Sans JP', sans-serif;
  --font-serif-en:  'Playfair Display', serif;
  --font-accent-en: 'Lora', serif;

  /* Spacing Scale */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  32px;
  --sp-lg:  56px;
  --sp-xl:  80px;
  --sp-2xl: 120px;

  /* Layout */
  --max-width: 1280px;
  --gutter: 20px;
  --header-height: 68px;

  /* Easing */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* Transitions */
  --t-fast: 0.2s var(--ease-out);
  --t-mid:  0.4s var(--ease-out);
  --t-slow: 0.7s var(--ease-out);
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --header-height: 76px;
    --sp-2xl: 160px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 60px;
  }
}

/* --- Heading Base --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif-ja);
  font-weight: 400;
  line-height: 1.35;
}

/* --- Text Selection --- */
::selection {
  background: var(--green);
  color: #fff;
}

/* --- Focus Outline (accessibility) --- */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* --- Visually Hidden (a11y) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}