/* Harmonia テスト版の案内ページ(仮)。本体のダークネイビー(ColorTokens.darkNavy・AppFont)の値に寄せる。
   ライトモードは作らない(本体がダーク 1 本)。見た目は横田氏の差し替え前提。
   影・グラデーション・角丸 6 超・アイコンは使わない(直線で組む本体の方針)。 */

/* 色 = Harmonia/DesignTokens.swift の navy 系(値はそのまま) */
:root {
  color-scheme: dark;
  --surface: #61656B;                    /* navySurfaceContent(面は 1 段・サイドバー/浮く面も同色) */
  --text: #DFE4EC;                       /* navyTextPrimary */
  --text-2: #C7CAD1;                     /* navyTextSecondary */
  --text-3: #A1A5AA;                     /* navyTextTertiary */
  --accent: #6C9CF5;                     /* navyAccent */
  --rule: var(--text);                   /* navyBorderRule = 本文(主)と同値・0.5px */
  --border-faint: rgba(223,228,236,0.10);/* navyBorderFaint */
  --selected: rgba(108,156,245,0.18);    /* navySurfaceSelected(ボタンのホバーに使う) */
  --warning: #EDA34A;                    /* navyStateWarning(お願いの節の印に使ってよい・任意) */
}

/* 書体 = AppFont(和文 游ゴシック体 Medium / 欧文 Helvetica Neue Light・強調 = 游ゴシック体 Bold / Helvetica Neue Medium)。
   local() で Mac 内蔵の書体だけを指す(ダウンロードなし・Mac 以外は sans-serif に落ちる)。
   欧文を 5% 大きくする混植の合わせ込みは CSS では再現しない。 */
@font-face { font-family: "Harmonia Sans"; src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"); font-weight: 300;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Harmonia Sans"; src: local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"); font-weight: 600;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Harmonia Sans"; src: local("YuGothic-Medium"), local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Harmonia Sans"; src: local("YuGothic-Bold"), local("Yu Gothic Bold"); font-weight: 600; }
body { font-family: "Harmonia Sans", "Hiragino Sans", sans-serif; font-weight: 300; }
strong, h1, h2, h3, .button { font-weight: 600; }

/* 寸法 = 3 段 S 11 / M 14 / L 18・行送り base 1.8 / large 1.5・余白 4/8/12/16/20/24・角丸は 6 まで・罫線は 0.5px を行の上 */
body { font-size: 14px; line-height: 1.8; color: var(--text); background: var(--surface); max-width: 680px; margin: 0 auto; padding: 40px 36px 48px; }
h1 { font-size: 18px; line-height: 1.5; margin: 0 0 4px; }
.site-header p { font-size: 11px; color: var(--text-2); margin: 0; }
h2 { font-size: 18px; line-height: 1.5; margin: 40px 0 20px; padding-top: 12px; border-top: 0.5px solid var(--rule); }   /* 見出し = 上 40 / 下 20・罫線は上 */
p, li { font-size: 14px; }
ul { padding-left: 1.25em; } li + li { margin-top: 8px; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.button { display: inline-block; padding: 8px 16px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); background: transparent; }
.button:hover { background: var(--selected); text-decoration: none; }
dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 0; margin: 16px 0; }
dt, dd { padding: 8px 0; border-top: 0.5px solid var(--border-faint); margin: 0; }   /* 行の区切り = 極細の線を行の上 */
dt { color: var(--text-3); font-size: 11px; line-height: 1.8; } dd { overflow-wrap: anywhere; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; color: var(--text-2); }
.site-footer { margin-top: 48px; padding-top: 12px; border-top: 0.5px solid var(--border-faint); color: var(--text-3); font-size: 11px; }