/* tokens.css — 共通デザイントークン
   規約は ../DESIGN.md を参照。個別CSSに生の色を書かないこと。 */

:root {
  /* 面 */
  --bg:        #FFFFFF;
  --bg-warm:   #EFEFE7;   /* わずかに黄みのあるオフホワイト */
  --bg-cool:   #EFEFEF;
  --bg-sunk:   #F7F7F3;

  /* 文字 */
  --ink:       #333333;
  --ink-mute:  rgba(51, 51, 51, 0.72);   /* 実効 4.86:1（最悪背景 #EFEFE7 上）。これ未満に薄めない */
  --ink-faint: rgba(51, 51, 51, 0.50);   /* 装飾専用。本文・出典・ラベルに使わない */
  --ink-on-accent: #FFFFFF;

  /* アクセント（H215 / S66.5% / L45.7%） */
  --accent:      #2768C2;
  --accent-deep: #17376B;
  --accent-weak: #EAF1FA;
  --accent-line: #B8D0EC;

  /* 罫線 */
  --rule:        #DDDDD8;
  --rule-strong: #C4C4BE;

  /* 意味色（最小限。判定バッジ用） */
  --ok:    #1F6F4A;
  --warn:  #8A6212;
  --risk:  #A33A32;
  --ok-weak:   #E8F2EC;
  --warn-weak: #F6F0E0;
  --risk-weak: #F7EAE8;

  /* 書体 */
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-sans:  "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono:  "SF Mono", "Menlo", "Consolas", monospace;

  /* 級数 */
  --fs-1:  0.72rem;
  --fs-2:  0.8rem;
  --fs-3:  0.875rem;
  --fs-4:  1rem;
  --fs-5:  1.1875rem;
  --fs-6:  1.5rem;
  --fs-7:  2rem;
  --fs-8:  2.75rem;
  --fs-9:  4rem;

  /* 余白 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 44px; --sp-8: 56px;
  --sp-9: 72px; --sp-10: 104px; --sp-11: 144px;

  --radius: 2px;
  --measure: 34em;      /* 本文の行長上限 */
  --page: 1120px;       /* ページ最大幅 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #14171C;
    --bg-warm:   #1B1E22;
    --bg-cool:   #191C21;
    --bg-sunk:   #101317;

    --ink:       #E6E8EA;
    --ink-mute:  rgba(230, 232, 234, 0.72);
    --ink-faint: rgba(230, 232, 234, 0.48);
    --ink-on-accent: #0E1319;

    --accent:      #6FA8E8;
    --accent-deep: #A9CBF0;
    --accent-weak: #1C2A3D;
    --accent-line: #33506F;

    --rule:        #2A2F36;
    --rule-strong: #3C434C;

    --ok:    #6FC79B;
    --warn:  #D9B45F;
    --risk:  #E08A80;
    --ok-weak:   #16261E;
    --warn-weak: #262014;
    --risk-weak: #2A1917;
  }
}

:root[data-theme="dark"] {
  --bg:        #14171C;
  --bg-warm:   #1B1E22;
  --bg-cool:   #191C21;
  --bg-sunk:   #101317;

  --ink:       #E6E8EA;
  --ink-mute:  rgba(230, 232, 234, 0.72);
  --ink-faint: rgba(230, 232, 234, 0.48);
  --ink-on-accent: #0E1319;

  --accent:      #6FA8E8;
  --accent-deep: #A9CBF0;
  --accent-weak: #1C2A3D;
  --accent-line: #33506F;

  --rule:        #2A2F36;
  --rule-strong: #3C434C;

  --ok:    #6FC79B;
  --warn:  #D9B45F;
  --risk:  #E08A80;
  --ok-weak:   #16261E;
  --warn-weak: #262014;
  --risk-weak: #2A1917;
}

/* ── 基本体裁 ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-4);
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0.01em;
  margin: 0;
}

a { color: var(--accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; font-size: var(--fs-2); letter-spacing: .08em; color: var(--ink-mute); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

code, kbd { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-8) 0; }

::selection { background: var(--accent-weak); color: var(--accent-deep); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 反復して使う部品 ─────────────────────── */

.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--sp-5); }
.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}

.rule-top { border-top: 1px solid var(--rule); }

.num-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-8);
  line-height: 1;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  font-size: var(--fs-1);
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge.ok   { color: var(--ok);   background: var(--ok-weak); }
.badge.warn { color: var(--warn); background: var(--warn-weak); }
.badge.risk { color: var(--risk); background: var(--risk-weak); }
.badge.info { color: var(--accent); background: var(--accent-weak); }

.src {
  font-size: var(--fs-1);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  line-height: 1.8;
}
.src a { color: var(--ink-mute); }

/* 横に溢れうるものは自分の中でスクロールさせる（ページ本体は横スクロールさせない） */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  :root { --fs-8: 2.1rem; --fs-9: 2.6rem; --fs-7: 1.6rem; }
  .page { padding: 0 var(--sp-4); }
}

@media print {
  body { background: #fff; color: #000; }
  .no-print { display: none !important; }
}