/* 見た目の型（変数だけ）。全頁が最初に読む（tokens.css → base.css → parts.css → 頁の CSS の順に <link>。@import は使わない）。
   方針（CLAUDE.md 品質）：よくある学習アプリの見た目に寄せない。美しさ・静けさも学習効果の一部。地は白に寄せた明るい色、字は黒に寄せた暗い色、差し色は 2 つ（条件＝青、結果＝紫寄りの青）。配色の根拠は docs/research/07_color.md。
   寸法は rem（OS とブラウザの字の大きさに従う）。px の値は 16px のときの目安。 */
:root{
  /* ---- 色（明）。根拠は docs/research/07_color.md：青と青緑を軸に、明るく彩度を抑え、純白と純黒を避け、誤りに赤を使わない。字は地に対して 4.5:1 以上 ---- */
  --c-bg:#f1f0eb;--c-surface:#fcfbf8;--c-surface-2:#ecebe6;
  --c-ink:#1f2329;--c-ink-2:#4f5560;--c-ink-3:#6e737a;   /* 押せない状態と飾りだけ（ink-2 と見分ける。docs/DESIGN.md 討論） */
  --c-line:#dcdad3;--c-line-strong:#7d828a;
  --c-acc:#2b5f8e;--c-acc-ink:#ffffff;--c-acc-text:#2b5f8e;--c-acc-soft:color-mix(in srgb,var(--c-acc) 10%,var(--c-surface));
  --c-res:#5a4e9c;--c-res-soft:color-mix(in srgb,var(--c-res) 10%,var(--c-surface));     /* 結果：紫寄りの青（条件の青と見分け、赤は使わない） */
  --c-ok:#1f7356;--c-ng:#a85320;     /* 正：青緑、誤：橙（赤緑の色覚でも見分けられる組。印も添える） */
  --c-ok-soft:color-mix(in srgb,var(--c-ok) 12%,var(--c-surface));--c-ng-soft:color-mix(in srgb,var(--c-ng) 12%,var(--c-surface));
  --c-scrim:rgba(20,24,30,.45);
  /* 図の色（テーマに関わらず明るい紙の上） */
  --fig-paper:#fcfbf8;--fig-ink:#1f2329;--fig-grid:#e2e1dc;--fig-g:#5a5f66;--fig-n:#2b5f8e;--fig-f:#6b5aa6;--fig-t:#1f7356;--fig-v:#1f7356;

/* ---- 字（書体は Zen Kaku Gothic New だけ。太さは 400・500・700） ---- */
  --font:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Noto Sans JP","Meiryo",system-ui,sans-serif;
  --mono:"SF Mono","Consolas","Menlo",monospace;
  --t-cap:.875rem;--t-sm:1rem;--t-body:1.125rem;--t-lead:1.3125rem;--t-title:1.625rem;--t-hero:2.125rem;   /* 14・16・18・21・26・34px（Apple の段を 1 段上げた。オーナー「文字が小さい」2026-11-02） */

  /* ---- 余白と寸法 ---- */
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;
  --hdr-h:3rem;--tap:2.75rem;--col-max:38rem;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);

  /* ---- 角丸・線・影・動き ---- */
  --r-s:.375rem;--r-m:.75rem;--r-l:1rem;
  --bw:1px;
  --sh-pop:0 8px 24px rgba(20,18,14,.16);
  --d-1:120ms;--d-2:200ms;--d-3:320ms;
  --e-in:cubic-bezier(.2,0,0,1);

  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --c-bg:#181b20;--c-surface:#20242b;--c-surface-2:#292e36;
    --c-ink:#dad8d2;--c-ink-2:#b9bbbe;--c-ink-3:#a3a7ac;
    --c-line:#353b45;--c-line-strong:#7a818b;
    --c-acc:#9dbde3;--c-acc-ink:#101820;--c-acc-text:#9dbde3;
    --c-res:#bdb3ea;
    --c-ok:#86cfb0;--c-ng:#e2a47c;
    --c-scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --c-bg:#181b20;--c-surface:#20242b;--c-surface-2:#292e36;
  --c-ink:#dad8d2;--c-ink-2:#b9bbbe;--c-ink-3:#a3a7ac;
  --c-line:#353b45;--c-line-strong:#7a818b;
  --c-acc:#9dbde3;--c-acc-ink:#101820;--c-acc-text:#9dbde3;
  --c-res:#bdb3ea;
  --c-ok:#86cfb0;--c-ng:#e2a47c;
  --c-scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}