/* ==========================================================================
   Design Tokens — AtoJ Experiences
   ここを変更するだけでサイト全体の見た目(配色・フォント・余白・角丸)を
   差し替えられるように、値はすべて変数化しています。
   ========================================================================== */

:root {
  /* --- Color: Base (和紙のような温かいオフホワイト + 墨色) --- */
  --color-bg: #faf8f4;
  --color-bg-alt: #f1ece3;
  --color-surface: #ffffff;
  --color-ink: #1c1b19;
  --color-ink-soft: #4a4744;
  --color-ink-faint: #8a8580;
  --color-border: #e3ddd0;

  /* --- Color: Accent (真鍮/金の差し色) --- */
  --color-accent: #8b6f47;
  --color-accent-dark: #6e5636;
  --color-accent-soft: #d8c8ab;
  --color-accent-bg: #f4ede1;

  /* --- Color: Utility --- */
  --color-white: #ffffff;
  --color-overlay: rgba(28, 27, 25, 0.55);

  /* --- Typography: 日本語ページ --- */
  --font-heading-ja: "Shippori Mincho", serif;
  --font-body-ja: "Noto Sans JP", -apple-system, sans-serif;

  /* --- Typography: 英語ページ --- */
  --font-heading-en: "Cormorant Garamond", Georgia, serif;
  --font-body-en: "Inter", -apple-system, sans-serif;

  /* --- Font sizes (fluid) --- */
  --fs-hero: clamp(2.25rem, 5vw + 1rem, 4rem);
  --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-lead: clamp(1.05rem, 1vw + 0.8rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* --- Spacing scale --- */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* --- Layout --- */
  --container-max: 1120px;
  --container-narrow: 720px;
  --container-padding: clamp(1.25rem, 5vw, 3rem);

  /* --- Radius(控えめな角丸で上品さを保つ) --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 3px rgba(28, 27, 25, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 27, 25, 0.08);
  --shadow-lg: 0 16px 48px rgba(28, 27, 25, 0.12);

  /* --- Motion --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index scale --- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* 言語ごとにフォントを切り替える(body要素に lang-ja / lang-en を付与) */
.lang-ja {
  --font-heading: var(--font-heading-ja);
  --font-body: var(--font-body-ja);
}

.lang-en {
  --font-heading: var(--font-heading-en);
  --font-body: var(--font-body-en);
}