/* orientxlabs のデザイントークン(第2版 2026-10-18。framework/design.md 2、H-096)
   カバー・サムネイル・サイトは、色と書体をこの変数だけで参照する(直書きは scripts/design_check.py が指摘する)。
   商品ごとのアクセント色は、商品側の CSS で --accent だけを上書きしてよい(1色まで)。

   本文に使う「文字 / 地」の組。design_check.py tokens がコントラストを測る:
   @pair ink on paper body
   @pair ink-muted on paper body
   @pair ink on surface body
   @pair paper on brand large
   @pair paper on brand body
*/
:root {
  /* 色: 役割の名前で使う。白地を既定にする(クリーム地 + セリフ見出しの組み合わせは使わない) */
  --paper: #FFFFFF;      /* 地 */
  --surface: #F2F4F5;    /* 区切りの面・表の見出し行 */
  --ink: #16191D;        /* 文字 */
  --ink-muted: #4A525B;  /* 補助の文字(本文と同じ地の上で 4.5:1 以上) */
  --line: #D5DADF;       /* 罫線 */
  --brand: #0F6B64;      /* 発行元の印。面に塗るのは小さな範囲だけ */
  --accent: #0F6B64;     /* 商品ごとに1色まで上書きしてよい */

  /* 書体: いずれも SIL OFL(商用・画像への埋め込み可)。読み込めないと別の書体に落ちるので、描画の後に実際の書体を確かめる */
  --font-ja: "Noto Sans JP", sans-serif;            /* 日本語の見出し・本文 */
  --font-latin: "IBM Plex Sans", "Noto Sans JP", sans-serif; /* 欧文の見出し・本文 */
  --font-reading: "Noto Serif JP", serif;           /* 長文の読み物だけ。白地で使う */
  --font-numeric-feature: "tnum" 1;                 /* 数値の列は桁を揃える */

  /* 文字の大きさの段階(画面用)。画像は design.md 3 の媒体ごとの最小に従う */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.1rem;
  --step-4: 2.8rem;

  /* 余白: 4px の倍数 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --radius: 6px;         /* 角丸は控えめに1種類 */
}