/* ============================================================
   Clinic Morinosato — Design Tokens
   クリニック杜の里 デザインシステム

   Built from observation of the live site. Warm, calm, natural:
   teal (forest / kingfisher), taupe (tree trunk), cream (paper),
   with watercolor leaves and kingfisher illustrations as accents.
   ============================================================ */

/* --- Web fonts ---------------------------------------------- */
/* Japanese body/display uses Zen Kaku Gothic New (Google Fonts,
   Yoshimichi Ohira / Zen Font Project) as its primary, with
   Hiragino / Yu Gothic / Meiryo as the system fallback chain —
   matching the live site exactly.  Lato fills in as a humanist
   sans for the Latin eyebrows and wordmark. */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

:root {
  /* -------- Color: core brand ------------------------------ */
  --mori-teal-900: #1f6a55;   /* darkest — rare, for press states */
  --mori-teal-700: #2e8469;   /* primary brand — logo tree, headings */
  --mori-teal-600: #3ca685;   /* primary CTA fill */
  --mori-teal-500: #4db69a;   /* hover CTA */
  --mori-teal-300: #9fd3c3;   /* soft accent / lines */
  --mori-teal-100: #e4f1ec;   /* panel tint (medical-info bg, tags) */
  --mori-teal-050: #f1f7f4;   /* barely-there teal wash */

  --mori-taupe-700: #8c6f5a;  /* logo trunk — darkest wood */
  --mori-taupe-500: #b79880;  /* wood mid — dividers on cream */
  --mori-taupe-300: #d9c6b4;  /* soft wood tint */
  --mori-taupe-100: #ede3d7;  /* cream card body */

  --mori-sand-100: #f4efe4;   /* warm cream panel — about/access strip */
  --mori-sand-050: #faf7ee;   /* page tint when not pure white */

  --mori-accent-orange: #e8a352;   /* sparkle marker, kingfisher belly */
  --mori-accent-orange-soft: #f1c991;

  --mori-sky-100: #e8f1ee;    /* sky wash behind clouds */

  /* -------- Color: neutrals -------------------------------- */
  --mori-ink-900: #1d2a2b;    /* body text max contrast */
  --mori-ink-700: #2f3f40;    /* body text default */
  --mori-ink-500: #5a6b6c;    /* secondary text, captions */
  --mori-ink-400: #8a9899;    /* tertiary, timestamps */
  --mori-ink-300: #b7c0c0;    /* disabled text */
  --mori-ink-200: #dde3e2;    /* hairlines */
  --mori-ink-100: #eef2f1;    /* hairline wash */
  --mori-paper:   #ffffff;    /* white card */
  --mori-bg:      #fbfaf5;    /* off-white page bg */

  /* -------- Color: semantic -------------------------------- */
  --fg-1: var(--mori-ink-900);
  --fg-2: var(--mori-ink-700);
  --fg-3: var(--mori-ink-500);
  --fg-muted: var(--mori-ink-400);
  --fg-brand: var(--mori-teal-700);
  --fg-on-brand: #ffffff;

  --bg-page:  var(--mori-bg);
  --bg-card:  var(--mori-paper);
  --bg-panel: var(--mori-sand-100);      /* cream panels */
  --bg-soft:  var(--mori-teal-100);      /* teal-tinted panel */

  --border-hairline: var(--mori-ink-200);
  --border-soft:     var(--mori-teal-100);
  --border-strong:   var(--mori-ink-300);

  --link:        var(--mori-teal-700);
  --link-hover:  var(--mori-teal-900);

  /* -------- Typography ------------------------------------- */
  /* Exact stack from the live site */
  --font-jp-sans:   "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-jp-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-latin:     "Lato", "Zen Kaku Gothic New", system-ui, sans-serif;

  --fs-display: 48px;   /* hero copy もっと身近に */
  --fs-h1:      32px;   /* section header 当院の特徴 */
  --fs-h2:      22px;   /* card title 安心のトータルケア */
  --fs-h3:      18px;
  --fs-body:    15px;   /* body paragraph */
  --fs-small:   13px;   /* captions, eyebrow Latin */
  --fs-tiny:    11px;   /* utility, fine print */

  --lh-tight:  1.25;
  --lh-normal: 1.7;     /* generous JP reading */
  --lh-loose:  2.0;

  --ls-jp-tight:  0.04em;
  --ls-latin-eyebrow: 0.24em;  /* spacious all-caps eyebrows */
  --ls-body: 0.02em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* -------- Spacing (4-based, rhythmic) -------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -------- Radii ------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 6px;     /* tiny tags */
  --r-md: 10px;    /* buttons, inputs */
  --r-lg: 16px;    /* cards, feature tiles */
  --r-xl: 24px;    /* large cream panels */
  --r-2xl: 32px;   /* hero panels w/ diagonal cut */
  --r-pill: 999px; /* capsule buttons, category tags */
  --r-circle: 50%;

  /* -------- Shadows ---------------------------------------- */
  /* Soft & diffuse — never harsh. Cards float on cream/paper. */
  --shadow-xs:  0 1px 2px rgba(31, 70, 55, 0.04);
  --shadow-sm:  0 2px 6px rgba(31, 70, 55, 0.06);
  --shadow-md:  0 8px 24px rgba(31, 70, 55, 0.08);
  --shadow-lg:  0 16px 40px rgba(31, 70, 55, 0.10);
  --shadow-inset-soft: inset 0 0 0 1px var(--border-soft);

  /* -------- Motion ----------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   150ms;
  --dur-normal: 240ms;
  --dur-slow:   400ms;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-jp-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--fg-brand);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-jp-tight);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Japanese display: the big hero headline is teal, regular-weight,
   generous line height, never all-caps.  Latin tagline sits below. */
.mori-display {
  font-family: var(--font-jp-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  color: var(--fg-brand);
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* Eyebrow caption — the site uses these everywhere as a Latin
   subtitle beneath a Japanese section header:  当院の特徴 / FEATURE */
.mori-eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--mori-taupe-500);
  letter-spacing: var(--ls-latin-eyebrow);
  text-transform: uppercase;
}

/* Section-title cluster: sparkle · JP title · Latin eyebrow */
.mori-section-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.mori-section-title .sparkle {
  width: 28px;
  height: 28px;
  opacity: 0.95;
}

p { line-height: var(--lh-normal); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
small { font-size: var(--fs-small); color: var(--fg-3); }
hr {
  border: 0;
  border-top: 1px dashed var(--border-hairline);
  margin: var(--space-7) 0;
}

/* Utility classes used across components & cards */
.mori-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.mori-panel-cream {
  background: var(--bg-panel);
  border-radius: var(--r-xl);
  padding: var(--space-8) var(--space-7);
}
.mori-panel-teal {
  background: var(--bg-soft);
  border-radius: var(--r-xl);
  padding: var(--space-8) var(--space-7);
}

/* Pill button — the primary CTA all over the site */
.mori-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 180px;
  height: 48px;
  padding: 0 28px;
  background: var(--mori-teal-600);
  color: var(--fg-on-brand);
  font-family: var(--font-jp-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.mori-btn:hover { background: var(--mori-teal-500); }
.mori-btn:active { transform: translateY(1px); background: var(--mori-teal-700); }
.mori-btn--ghost {
  background: transparent;
  color: var(--fg-brand);
  border: 1px solid var(--mori-teal-600);
}
.mori-btn--ghost:hover { background: var(--mori-teal-050); }
.mori-btn--dark {
  background: var(--mori-ink-900);
  color: #fff;
}

/* Small rounded category tag — 消化器内科｜内視鏡検査 etc */
.mori-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--mori-teal-300);
  border-radius: var(--r-sm);
  color: var(--fg-brand);
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  background: transparent;
}