/* ============================================
   base.css — CSS変数 / リセット / 基本タグスタイル
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
  /* Colors */
  --color-bg:           #FAF8F5;
  --color-surface:      #FFFFFF;
  --color-text:         #2C2C2C;
  --color-text-muted:   #7A7268;
  --color-accent:       #C8A96E;
  --color-accent-dark:  #A07840;
  --color-dark:         #1A1A1A;
  --color-border:       #E8E2D9;

  /* Green accent (ロゴカラー系) */
  --color-green:        #5B9B70;
  --color-green-dark:   #3D7A55;
  --color-green-deep:   #1D3A28;
  --color-green-light:  #EBF6EE;
  --color-green-mid:    #A3D4B0;
  --color-yellow-soft:  #F0D878;

  /* Typography */
  --font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-sans:  "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
  --font-en:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-base:  var(--font-sans);
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.25rem;
  --text-2xl:       1.5rem;
  --text-3xl:       1.875rem;
  --text-4xl:       2.25rem;
  --text-5xl:       clamp(2.25rem, 5vw, 3.25rem);
  --leading-tight:  1.3;
  --leading-normal: 1.75;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --section-padding: clamp(60px, 8vw, 120px);
  --brand-rail-width: clamp(72px, 5.8vw, 96px);

  /* Layout */
  --container-max:     1120px;
  --container-padding: clamp(20px, 5vw, 60px);

  /* Components */
  --radius-xs:         4px;
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --radius-full:       9999px;
  --shadow-card:       0 2px 12px rgba(44, 44, 44, 0.07);
  --shadow-card-hover: 0 8px 28px rgba(44, 44, 44, 0.13);
  --transition-base:   0.25s ease;

  /* Rules */
  --rule-muted:        1px solid var(--color-border);
  --rule-accent:       2px solid var(--color-accent);

  /* Paper overlay fingerprint — Hero と同じ110degの斜め面をサイト全体で共有 */
  --paper-angle:   110deg;
  --paper-rgb:     250, 248, 245;
  --paper-subtle:  linear-gradient(var(--paper-angle), rgba(var(--paper-rgb), 0.28) 0%, rgba(var(--paper-rgb), 0.06) 26%, transparent 46%);
  --paper-section: linear-gradient(var(--paper-angle), rgba(var(--paper-rgb), 1) 0%, rgba(var(--paper-rgb), 1) 8%, rgba(var(--paper-rgb), 0.28) 26%, transparent 48%);

  /* Header */
  --header-height:    72px;
  --header-height-sm: 60px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

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

/* ---- Focus visible: キーボードフォーカスリング ---- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- Reduce motion support ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}