/* tone.yojihan.com — アプリのデザインシステム（Theme.swift）を Web に写した最小セット。
   生成り × 墨の 2 トーン、等幅、リム + 接地影の板。値はアプリの Theme と揃える。 */

:root {
  /* ライト: 地 = Warm White の紙色、前景 = 墨インク */
  --charcoal: #fffcf0;        /* 基本の地 */
  --charcoal-raised: #ffffff; /* 持ち上げた面 */
  --charcoal-deep: #f6f4ea;   /* 沈んだ面 */
  --natural: #292621;         /* 前景（文字・罫線） */
  --rim: rgba(255, 255, 255, 0.45);
  --ground: rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ダーク: 地 = 墨、前景 = 生成り */
    --charcoal: #1c1c1b;
    --charcoal-raised: #292928;
    --charcoal-deep: #131312;
    --natural: #e6e1d1;
    --rim: rgba(255, 255, 255, 0.10);
    --ground: rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--natural);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

/* 見出し: アプリのバー UI と同じ大文字 + トラッキング */
.wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.wordmark a { color: inherit; text-decoration: none; }

header.site {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 64px;
}

h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 56px 0 12px;
  color: color-mix(in srgb, var(--natural) 55%, transparent);
}

p, li { font-size: 14px; }
.dim { color: color-mix(in srgb, var(--natural) 55%, transparent); }
.faint { color: color-mix(in srgb, var(--natural) 30%, transparent); }

ul { padding-left: 1.2em; margin: 8px 0; }
li { margin: 4px 0; }
li::marker { color: color-mix(in srgb, var(--natural) 30%, transparent); }

a { color: var(--natural); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* 板ボタン: raisedPlate（塗り + 内側リム + 外側の接地影）を box-shadow で再現 */
.plate {
  display: inline-block;
  padding: 10px 20px;
  background: var(--charcoal);
  color: var(--natural);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px var(--ground),   /* 内側の暗い縁 */
    inset 0 0 0 2px var(--rim);      /* そのすぐ内側のリム */
}
.plate:hover { background: var(--charcoal-deep); }

/* コンテンツの板: contentPlate（外側へ落ちる接地影 + 内側の控えめなリム） */
.content-plate {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 0 0 1px var(--ground),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.screenshot { max-width: 320px; margin: 48px auto; }

/* 罫線: BevelDivider（接地影の暗 + 上縁リムの明の 2 本組） */
hr {
  border: 0;
  height: 2px;
  margin: 56px 0;
  background: linear-gradient(var(--ground) 0 50%, var(--rim) 50% 100%);
}

footer.site {
  margin-top: 72px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 12px;
}
footer.site a { text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; }
footer.site .copyright { margin-left: auto; }

/* 定義リスト（プライバシーポリシー） */
section + section { margin-top: 8px; }