/* Hallmark · macrostructure: Stat-Led · genre: modern-minimal · theme: Cobalt
 * axes: paper=dark(near-black) · display=grotesk-sans · accent=cool(cobalt 262°)
 * tone: technical · nav: N9 · footer: Ft2 · enrichment: none
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 */
/* ============================================================
 * 代替フォントのメトリクス合わせ (2026-09-01)
 * Webフォント読み込み前は代替が描画され、差し替え時に字幅が変わって行が動く。
 * Lighthouse(モバイル回線)で CLS 0.188 の主因だった。
 * 実測: Noto Sans JP は sans-serif より 1.86% 広い / Space Grotesk は 4.0% 狭い。
 *       size-adjust で代替側をその比率に寄せると、差し替えても幅が変わらない。
 * ⚠️ 数値は実測して決めること。100px の同一文字列で幅を比べて比率を出す。
 * ============================================================ */
@font-face {
  font-family: "NotoSansJP Fallback";
  src: local("Hiragino Sans"), local("Yu Gothic Medium"), local("Yu Gothic"),
       local("Noto Sans CJK JP"), local("Meiryo"), local("Arial");
  size-adjust: 101.86%;
  font-display: swap;
}
@font-face {
  font-family: "SpaceGrotesk Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 96.0%;
  font-display: swap;
}

:root {
  /* color — v5「黒」: near-black の地 + 一本の電気コバルト
   * 明るい紙面版(v1〜v4)は git の cef60e2 に残してある。
   * 明暗を逆にしただけでなく、意味の向きも反転させている:
   *   明るい地では「濃い＝強い」、暗い地では「明るい＝強い」。
   *   accent-faint → dim → accent → accent-deep の順で強くなる関係は維持。 */
  --color-paper:    oklch(20.6% 0.022 252);   /* ページの地。濃紺(v9 / 2026-08-29)。
                                                 無彩色の黒は「背景の不在」に見える。明度を上げるだけでなく
                                                 彩度を倍にすると素材として読める。ロゴ案の地から実測して合わせた。 */
  --color-paper-2:  oklch(25.5% 0.026 252);   /* 一段持ち上げた面(カード・入力欄) */
  --color-ink:      oklch(96% 0.008 250);
  --color-ink-soft: oklch(82% 0.014 252);
  --color-muted:    oklch(68% 0.018 253);
  --color-hairline: oklch(36% 0.020 252);
  --color-accent:   oklch(79.7% 0.134 212);  /* シアン(v10 / 2026-08-30)。ロゴ案の発光側から実測。
                                                 暗い地では「明るい=強い」なので faint<dim<accent<deep は明度順。 */
  --color-accent-deep: oklch(88% 0.105 212);  /* 暗い地では deep=より明るい(最強調) */
  --color-accent-wash: oklch(30% 0.050 214);  /* 面を塗る淡いシアン(暗色版) */
  --color-focus:    oklch(83% 0.13 212);

  /* type — Space Grotesk display · Inter body · JetBrains Mono figures. JP: Noto Sans JP */
  --font-display: "Space Grotesk", "SpaceGrotesk Fallback", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "NotoSansJP Fallback", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans JP", monospace;

  /* scale 1.25 from 16px */
  --text-xs: 0.8125rem;   /* 13px 補助情報の床。12pxは本文の隣に置くと沈む */
  --text-sm: 0.9375rem;   /* 15px ラベル・キャプション */
  --text-md: 1.0625rem;   /* 17px ★読ませる層。見出しと補助の間を埋める */
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-display-s: clamp(1.75rem, 2.5vw + 0.75rem, 2.6rem);
  --text-display: clamp(2.4rem, 4vw + 1rem, 4.4rem);
  --text-figure: clamp(5.5rem, 17vw, 12.5rem);

  /* space — 4pt scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 7rem;

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 38em;

  --radius: 6px;
  --rule: 1px solid var(--color-hairline);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
}

/* v2 additions */
:root {
  --color-grid: oklch(40% 0.022 252 / 0.42); /* hero graph-paper overlay */
}

/* v3 · 夢中憲章: 注意の密度の階層(淡→濃)。Interは廃止 */
:root {
  --color-accent-faint: oklch(58% 0.070 214);  /* 分散状態・補助チップ(地に最も近い。AA下限で止める) */
  --color-accent-dim:   oklch(68% 0.100 213);   /* 散らかりの文字(装飾) */
}

/* v4 · 夢中憲章 redesign-elevate: 計測器盤(instrument panel)語彙 */
:root {
  --color-graphite:    oklch(28% 0.026 252); /* 計測室バンド。地(20.6%)より明るいので「持ち上がった盤」に読める */
  --color-graphite-2:  oklch(33% 0.028 252);
  --color-ondark-ink:  oklch(95% 0.008 250);
  --color-ondark-soft: oklch(80% 0.016 252);
  --color-ondark-muted:oklch(70% 0.020 253);
  --color-ondark-hair: oklch(40% 0.022 252);
  --color-ondark-accent: oklch(82% 0.120 212); /* 暗色地でのシアン */
  --text-display-xl: clamp(2.7rem, 5.2vw + 1rem, 5.2rem);
  --space-4xl: 9rem;
  --shell: 88rem;          /* ページ共通の背骨(コンテナ最大幅) */
}

/* v5 · 黒基調: フォーム部品・スクロールバー・ブラウザUIも暗色側に寄せる */
:root {
  color-scheme: dark;
}