/* =============================================================
   NEMUÉ beauty atelier — base.css
   デザイントークン / リセット / 基礎タイポグラフィ / ユーティリティ
   ============================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --color-bg: #FAF7F2;
  --color-surface: #FFFDFA;
  --color-beige: #E6DCCE;
  /* 文字用（コントラスト4.5:1以上を確保） */
  --color-greige: #6E665C;
  --color-text: #3E3731;
  --color-text-sub: #544E48;
  --color-accent: #7F6844;
  /* 装飾用（罫線・ドット・SVG。文字には使わない） */
  --color-accent-soft: #B39A72;
  --color-greige-soft: #B8AA9B;
  --color-cta: #726052;
  --color-cta-hover: #594A40;
  --color-line: rgba(62, 55, 49, 0.18);
  --color-error: #A04F4F;
  --color-success: #64765D;

  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;

  --container: 1240px;
  --content-narrow: 800px;
  --pad-inline: 20px;

  --space-section: clamp(88px, 15vw, 160px);
  --radius-photo: 10px;
  --radius-card: 16px;
  --radius-button: 999px;

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.5s var(--ease-soft);

  --header-h: 72px;
  --fixed-cta-h: 64px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
address { font-style: normal; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.45; }

/* フォーカス表示（キーボード操作） */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* inert中の要素は操作不可を視覚的にも保証 */
[inert] { pointer-events: none; }

/* ---------- Utilities ---------- */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.l-narrow { max-width: var(--content-narrow); margin-inline: auto; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--color-cta); color: #fff;
  padding: 10px 20px; border-radius: 0 0 8px 8px;
  transition: top 0.25s var(--ease-soft);
}
.skip-link:focus { top: 0; }

/* ---------- Reveal animation（JS有効時のみ非表示から開始） ---------- */
.js-reveal { transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
html.js .js-reveal { opacity: 0; transform: translateY(22px); }
html.js .js-reveal.is-visible { opacity: 1; transform: none; }