/* ============================================================
   サイト共通デザイン（DESIGN.md の実装）
   ------------------------------------------------------------
   各ページはこのファイルを先に読み、自分の CSS で上書きする。

     <link rel="stylesheet" href="../../shared/design.css">

   ここが持つのは3つだけ。
     1. 書体（明朝＝読ませる／Archivo＋ゴシック＝UI・メタ情報）
     2. 配色トークン（藍墨。ライト／ダークの4状態）
     3. ごく薄い下敷き（body の既定書体・色）

   レイアウトは持たない。ページ固有の CSS がそのまま効く。
   ============================================================ */

/* ---- Archivo（同梱・latin サブセットの可変フォント 300-700） ----
   Google Fonts からの読み込みではなく self-host にしてある。
   CDN 依存とオフライン時のフォールバックを避けるため（site/README.md の方針）。
   ライセンスは fonts/OFL.txt（SIL Open Font License 1.1）。 */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-var.woff2") format("woff2-variations"),
       url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  /* 和文は持っていない。欧文・数字だけを Archivo にし、和文はゴシックに落とす */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- 書体（DESIGN.md §1・§2） ---- */
  --serif:  "Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --gothic: "Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  /* UI・メタ情報。欧文と数字が Archivo、和文がゴシックになる */
  --ui: Archivo,"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;

  /* ---- 藍墨（DESIGN.md §6・ライト） ---- */
  --accent:      #2f3b4d;   /* 基準 */
  --accent-mid:  #4c5d75;
  --accent-pale: #8494a8;   /* 副次的な区別 */
  --accent-ink:  #2f3b4d;   /* 文字に使うときの色 */
  --on-accent:   #f2f4f7;   /* 藍墨を地色にしたときの文字 */

  /* 3系統以上を区別するとき（グラフ）。色相を変えず明度で分ける */
  --series-1: #1f4a6b;      /* 濃 */
  --series-2: #6f8fb0;      /* 淡 */
  --series-3: #8a8f96;      /* 中立グレー */

  /* リンクの色。新しい色は作らず --series-1 と同値にしてある */
  --link:      #1f4a6b;

  /* ---- 機能色（DESIGN.md §6-2）----
     藍墨が「意味・階層」の色なのに対し、これは「押すと何かが起きる場所」の色。
     使う場所は4か所だけ（記事タイトルの下線／details の開閉マーク／
     フォーカスリング／記事本文中のリンク）。ここを増やすと印として働かなくなる。 */
  --mark:      #2e6b5e;     /* 緑青。#fafafa 上で 6.0:1 */
  --mark-wash: #edf4f1;     /* ホバー・フォーカス時の地 */

  /* ---- ニュートラル（青寄りのグレー・DESIGN.md §6） ---- */
  --bg:        #fafafa;
  --bg-2:      #f1f3f5;     /* 引用・パネルの地 */
  --card:      #ffffff;
  --ink:       #1b1f24;
  --ink-soft:  #4d545c;
  --ink-faint: #5c636b;     /* 小さいラベルに使うので #fafafa 上で 5.8:1 を確保する */
  --rule:      #b9bfc7;
  --rule-soft: #d6d9de;
  --track:     #dfe2e6;     /* 棒グラフの下地 */
}

/* ダーク。3状態すべてに同じ値を置く（片方だけ直すと置き去りになるため）。
   自動判定は [data-theme="light"] が付いていないときだけ効かせる。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:      #c2ccd9;
    --accent-mid:  #9aa8ba;
    --accent-pale: #71808f;
    --accent-ink:  #c2ccd9;
    --on-accent:   #16191b;

    --series-1: #8fb4d6;
    --series-2: #4d6c8c;
    --series-3: #7b8087;

    --link:      #8fb4d6;

    --mark:      #8fbfb0;
    --mark-wash: #1e2a27;

    --bg:        #16191b;
    --bg-2:      #1e2225;
    --card:      #1e2225;
    --ink:       #e7eaed;
    --ink-soft:  #aab1b8;
    --ink-faint: #949aa1;
    --rule:      #414750;
    --rule-soft: #31363c;
    --track:     #2b3035;
  }
}
:root[data-theme="dark"] {
  --accent:      #c2ccd9;
  --accent-mid:  #9aa8ba;
  --accent-pale: #71808f;
  --accent-ink:  #c2ccd9;
  --on-accent:   #16191b;

  --series-1: #8fb4d6;
  --series-2: #4d6c8c;
  --series-3: #7b8087;

  --link:      #8fb4d6;

  --mark:      #8fbfb0;
  --mark-wash: #1e2a27;

  --bg:        #16191b;
  --bg-2:      #1e2225;
  --card:      #1e2225;
  --ink:       #e7eaed;
  --ink-soft:  #aab1b8;
  --ink-faint: #949aa1;
  --rule:      #414750;
  --rule-soft: #31363c;
  --track:     #2b3035;
}
:root[data-theme="light"] {
  --accent:      #2f3b4d;
  --accent-mid:  #4c5d75;
  --accent-pale: #8494a8;
  --accent-ink:  #2f3b4d;
  --on-accent:   #f2f4f7;

  --series-1: #1f4a6b;
  --series-2: #6f8fb0;
  --series-3: #8a8f96;

  --link:      #1f4a6b;

  --mark:      #2e6b5e;
  --mark-wash: #edf4f1;

  --bg:        #fafafa;
  --bg-2:      #f1f3f5;
  --card:      #ffffff;
  --ink:       #1b1f24;
  --ink-soft:  #4d545c;
  --ink-faint: #5c636b;
  --rule:      #b9bfc7;
  --rule-soft: #d6d9de;
  --track:     #dfe2e6;
}

/* ---- 下敷き（DESIGN.md §1：読ませるテキストは明朝） ---- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}

/* 明朝（ヒラギノ明朝 ProN・游明朝）は太字ウェイトを持たない。600 を当てると
   OS の合成太字になり、輪郭がにじんで小さい字ほど潰れる。
   強調が要るところは書体をゴシックに替えて、実在するウェイトを使う。
   見出しは太らせず、サイズで階層を付ける（各ページの CSS 側）。 */
strong, b { font-family: var(--gothic); font-weight: 600; }

/* UI・メタ情報に付けるクラス。個別指定のかわりに使える（DESIGN.md §2・§3） */
.ui {
  font-family: var(--ui);
  letter-spacing: .06em;
}
.ui--label {                 /* 小さいラベル・凡例・キャプション */
  font-family: var(--ui);
  letter-spacing: .12em;
  font-size: .72rem;
  color: var(--ink-faint);
}
.ui--num {                   /* 年号・件数など、数字を読ませるところ */
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* 装飾的な帯を引かない（DESIGN.md §4） */
header { border-top: 0; }

/* スクロールバーなどを地色に追随させる */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }