/* 色はここだけで決める。画面側のCSSに #rrggbb を書かない（CLAUDE.md §3 と同じ決まり）。
   見た目は「次世代保全基盤 モック」に寄せる（藍色の主色・白い横帯と左の帯・薄い灰青の地）。
   白テーマと黒テーマの両方で、本文 4.5:1・大きい文字と図形 3:1 を満たす組み合わせにしてある。
   変えたら check/step2-test.js のコントラスト検査で両テーマを測り直す。 */
@font-face { font-family: "HK Grotesk"; src: url(/assets/fonts/hkgrotesk-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HK Grotesk"; src: url(/assets/fonts/hkgrotesk-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "HK Grotesk"; src: url(/assets/fonts/hkgrotesk-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "HK Grotesk"; src: url(/assets/fonts/hkgrotesk-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f3f3f9;
  --surface: #ffffff;
  --sunk: #f3f6f9;
  --hover: #f2f6fd;
  --line: #e9ebec;
  --line-2: #dde1e6;
  --ink: #212529;
  --ink-2: #4f5666;
  --ink-3: #626a7b;
  --accent: #405189;
  --accent-2: #364574;
  --accent-soft: #e6eaf5;
  --accent-ink: #ffffff;
  --ok: #0b6e50;   --ok-soft: #dcf3ea;
  --warn: #85560a; --warn-soft: #fcefd6;
  --bad: #b3372a;  --bad-soft: #fde8e4;
  --info: #1d6390; --info-soft: #dff0f8;
  --star: #b06800;
  --star-off: #c9ced6;
  --scrim: rgba(26, 32, 44, .45);
  --shadow: 0 1px 2px rgba(56, 65, 74, .06);
  --shadow-lg: 0 10px 40px rgba(26, 32, 44, .22);
  /* ジャンルの色。文字色は淡い地の上で 4.5:1 を超えるように濃くしてある */
  --g-movie: #3049a8;  --g-movie-soft: #e3e8fa;
  --g-anime: #a8255a;  --g-anime-soft: #f9e2ec;
  --g-manga: #23703a;  --g-manga-soft: #e0f1e4;
  --g-book: #8a4f08;   --g-book-soft: #f7ead6;
  --g-music: #5b3bb8;  --g-music-soft: #ebe5fa;
  /* 写真を大きく見る画面は、白黒どちらのテーマでも暗い地にする（写真が見やすいように）。 */
  --lb-bg: rgba(10, 12, 16, .94); --lb-ink: #f1f3f5; --lb-ink-2: #c3c9d0; --lb-btn: rgba(255, 255, 255, .1); --lb-btn-2: rgba(255, 255, 255, .22); --lb-line: rgba(255, 255, 255, .3);
  --on-scrim: #ffffff;
  /* 表紙の上の「表紙を変える」。表紙がどんな色でも白文字が読めるよう、幕より濃くする */
  --hint-bg: rgba(10, 12, 16, .78);
  --f-body: "HK Grotesk", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --f-num: "HK Grotesk", ui-monospace, "SF Mono", Menlo, monospace;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 5px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1d21; --surface: #212529; --sunk: #282c31; --hover: #2a3140; --line: #32383e; --line-2: #40474f;
    --ink: #dfe3e8; --ink-2: #b2bac4; --ink-3: #9ea7b2;
    --accent: #95a6e8; --accent-2: #b3c0f0; --accent-soft: #2b3352; --accent-ink: #12162a;
    --ok: #5fd3aa; --ok-soft: #17352c; --warn: #f0bd62; --warn-soft: #3a2f17;
    --bad: #ff9686; --bad-soft: #3d211d; --info: #74c4ee; --info-soft: #17303d;
    --star: #f2b33d; --star-off: #4d545c;
    --scrim: rgba(0, 0, 0, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
    --g-movie: #a9b8f5; --g-movie-soft: #262f4d;
    --g-anime: #f3a3c4; --g-anime-soft: #42253a;
    --g-manga: #94d6a6; --g-manga-soft: #1f3a29;
    --g-book: #ecc184; --g-book-soft: #3d311f;
    --g-music: #c6b5f5; --g-music-soft: #31284d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1d21; --surface: #212529; --sunk: #282c31; --hover: #2a3140; --line: #32383e; --line-2: #40474f;
  --ink: #dfe3e8; --ink-2: #b2bac4; --ink-3: #9ea7b2;
  --accent: #95a6e8; --accent-2: #b3c0f0; --accent-soft: #2b3352; --accent-ink: #12162a;
  --ok: #5fd3aa; --ok-soft: #17352c; --warn: #f0bd62; --warn-soft: #3a2f17;
  --bad: #ff9686; --bad-soft: #3d211d; --info: #74c4ee; --info-soft: #17303d;
  --star: #f2b33d; --star-off: #4d545c;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
  --g-movie: #a9b8f5; --g-movie-soft: #262f4d;
  --g-anime: #f3a3c4; --g-anime-soft: #42253a;
  --g-manga: #94d6a6; --g-manga-soft: #1f3a29;
  --g-book: #ecc184; --g-book-soft: #3d311f;
  --g-music: #c6b5f5; --g-music-soft: #31284d;
  color-scheme: dark;
}