/* ============================================================
   Spica 公式サイトのデザイントークン。
   アプリ（client-next）と同じ値を使う（別物に見えないように）。
   色・角丸・影・書体はここだけで決める。
   ============================================================ */
:root {
  /* 色 */
  --bg: #f4f5fa;
  --paper: #ffffff;
  --surface: #fafbff;
  --line: #e8eaf3;
  --line-soft: #eff1f8;
  --text: #191c26;
  --text-sub: #5d6474;
  --text-faint: #8b91a3;
  --accent: #6d5ae6;
  --accent-hover: #5b48d6;
  --accent-soft: #efecfd;
  --magenta: #d9649b;
  --live: #12a150;
  --pearl: linear-gradient(135deg, #8f7bf0 0%, #c79bea 55%, #f3c6dc 100%);

  /* 形と影 */
  --r-card: 10px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 24, 40, 0.05), 0 10px 30px -18px rgba(20, 24, 40, 0.18);
  --shadow-2: 0 20px 52px -26px rgba(30, 32, 60, 0.28);

  /* 書体 */
  --sans: "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 幅と余白 */
  --w-page: 1080px;
  --pad-page: 24px;
  --gap-section: 88px;
}

[data-theme='dark'] {
  --bg: #0f111b;
  --paper: #171a28;
  --surface: #1b1e2e;
  --line: #252a40;
  --line-soft: #1f2434;
  --text: #e9ebf4;
  --text-sub: #a2a8bd;
  --text-faint: #7a8098;
  --accent: #8b8dff;
  --accent-hover: #a5a7ff;
  --accent-soft: rgba(139, 141, 255, 0.16);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -18px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 20px 52px -26px rgba(0, 0, 0, 0.7);
}

/* ---- 素の要素の整え ---- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  line-height: 1.4;
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  :root {
    --gap-section: 64px;
    --pad-page: 20px;
  }
}