/* ============================================================
   amane web — base
   ============================================================
   全 4 ページ共通：tokens / reset / bloom 背景 / header / footer。
   content pages（terms/privacy/support）は content.css を追加で読む。
   LP（index.html）はこのファイル + インライン LP-specific 定義。
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Shippori+Mincho:wght@400;500&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap");

:root {
  /* canvas */
  --bg-deep: oklch(0.135 0.012 235);
  --bg-canvas: oklch(0.165 0.012 235);
  --bg-surface: oklch(0.205 0.014 235);
  --bg-sunken: oklch(0.150 0.011 235);

  /* text — moonlight on water */
  --text-rain: oklch(0.94 0.005 235);
  --text-mist: oklch(0.74 0.010 235);
  --text-drop: oklch(0.54 0.013 235);
  --text-far: oklch(0.40 0.012 235);

  /* lines */
  --line-hair: oklch(1 0 0 / 0.06);
  --line: oklch(1 0 0 / 0.12);
  --line-strong: oklch(1 0 0 / 0.24);

  /* rain particle silver */
  --rain-bright: oklch(0.94 0.012 235);
  --rain-soft: oklch(0.82 0.018 235);

  /* vignette */
  --vignette-stop-1: oklch(0.18 0.012 235);
  --vignette-stop-2: oklch(0.10 0.008 235);

  /* fonts */
  --font-serif: "Cormorant Garamond", "Shippori Mincho", serif;
  --font-jp: "Shippori Mincho", "Cormorant Garamond", serif;
  --font-sans: "DM Sans", "Shippori Mincho", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* spacing — 4pt grid */
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* content widths */
  --w-readable: 640px;
  --w-content: 880px;
  --w-wide: 1120px;

  color-scheme: dark;
}

/* base ====================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-rain);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--rain-bright); color: var(--bg-canvas); }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--rain-bright); outline-offset: 4px; border-radius: 2px; }

/* bloom-bg canvas — fixed full-viewport ===================== */

#bloom-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* content-page wrapper：content pages は body に .rain-canvas を付けて
   sticky footer のため flex column ＋ min-height 100vh を確保する。
   LP（index.html）は付けないので無影響。 */
.rain-canvas {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main content stays above the bloom canvas */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* header ===================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px;
  max-width: var(--w-wide);
  margin: 0 auto;
  width: 100%;
}
.site-header .wordmark {
  display: inline-flex;
  /* content pages では a タグになるので content.css の本文 a 下線を外す */
  border-bottom: 0;
}
.site-header .wordmark img {
  display: block;
  height: 34px;
  width: auto;
}
.site-header .header-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-drop);
  text-transform: uppercase;
}

/* footer ===================================================== */

.site-footer {
  border-top: 1px solid var(--line-hair);
  padding: var(--s-12) 28px var(--s-16);
}
.site-footer-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-drop);
  /* content.css の本文 a 下線をフッターでは外す */
  border-bottom: 0;
  transition: color 180ms ease;
}
.footer-links a:hover { color: var(--text-rain); }
.footer-links .sep {
  width: 18px;
  height: 1px;
  background: var(--line);
}
.footer-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-far);
}

/* responsive ================================================= */

@media (max-width: 640px) {
  .site-header { padding: 20px 20px; }
  .site-header .wordmark img { height: 28px; }
  .site-header .header-meta { display: none; }
  .site-footer { padding: var(--s-8) 20px var(--s-10); }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
  .footer-links { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .footer-links .sep { display: none; }
}