/* 鯖江数学塾サイトの数値（docs/DESIGN.md の写し）。値を変えるときは DESIGN.md と同時に直す */

:root {
  color-scheme: light;

  /* ---------- 色: 画面（DESIGN.md §8） ---------- */
  --paper: #fdfcf9;   /* 紙 */
  --ink: #1a1a1a;     /* 墨 */
  --gray: #6b6964;    /* 灰 */
  --rule: #dedbd4;    /* 淡灰（細罫） */
  --tint: #f4f3ef;    /* 地 */
  --alert: #c0432b;   /* 警告（フォームのエラーだけ） */

  /* ---------- 色: 図版（濃い色と淡い色の組。図版の中でだけ使う） ---------- */
  --ai: #24437a;          --ai-pale: #dfe5f1;          /* 藍 */
  --shu: #c0432b;         --shu-pale: #f6e0d8;         /* 朱 */
  --fukamidori: #1e4d3b;  --fukamidori-pale: #d7e5db;  /* 深緑 */
  --odo: #9a6f17;         --odo-pale: #f3e5bf;         /* 黄土 */
  --enji: #8b2e3c;        --enji-pale: #f2e0e2;        /* 臙脂 */
  --seiji: #357368;       --seiji-pale: #d9ebe6;       /* 青磁 */
  /* ページの図版色。ページごとに body で上書きする（例: body { --fig: var(--shu); --fig-pale: var(--shu-pale); }） */
  --fig: var(--ai);
  --fig-pale: var(--ai-pale);

  /* ---------- 書体（§5） ---------- */
  --f-sans: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", "IBM Plex Sans JP", ui-monospace, Menlo, monospace;
  --f-math: "IBM Plex Serif", "Times New Roman", serif;

  /* ---------- 文字サイズの段: 2^(n/4) rem ---------- */
  --t-1: 0.8409rem;  /* 13.5px 注、キャプション、ラベル */
  --t0: 1rem;        /* 16px   本文 */
  --t1: 1.1892rem;   /* 19.0px */
  --t2: 1.4142rem;   /* 22.6px */
  --t3: 1.6818rem;   /* 26.9px */
  --t4: 2rem;        /* 32px   */
  --t5: 2.3784rem;   /* 38.1px */
  --t6: 2.8284rem;   /* 45.3px */

  /* 役割ごとのサイズ（S の値。M と L で下の @media が上書きする） */
  --t-h1: var(--t4);
  --t-h2: var(--t2);
  --t-h3: var(--t1);

  /* ---------- 行送り（html の line-height。1rlh がこの行の高さになる） ---------- */
  --lh: 1.75;

  /* ---------- 余白（§6） ---------- */
  /* 縦は行の倍数 */
  --y-half: 0.5rlh;
  --y1: 1rlh;
  --y2: 2rlh;
  --y3: 3rlh;
  --y4: 4rlh;
  --y-section: 4rlh;  /* 節の間。L で 6 行 */
  /* 横は字の倍数 */
  --x-quarter: 0.25rem;
  --x-half: 0.5rem;
  --x1: 1rem;
  --x2: 2rem;
  --x4: 4rem;

  /* ---------- グリッド（§3） ---------- */
  --cols: 4;
  --gutter: 1rem;
  --margin: 1rem;
  --max: 70rem;       /* L の内容の最大幅 = 4字 × 12段 + 2字 × 11溝 */
  --measure: 40em;    /* 本文の行長の上限 */

  /* ---------- 罫線（§7） ---------- */
  --hair: 1px solid var(--rule);
  --bold: 2px solid var(--ink);

  /* ---------- 動き（§12） ---------- */
  --ease: 0.15s ease;
}

/* M: 768px から */
@media (min-width: 48rem) {
  :root {
    --cols: 8;
    --gutter: 2rem;
    --margin: 2rem;
    --t-h1: var(--t5);
    --t-h2: var(--t3);
  }
}

/* L: 1024px から */
@media (min-width: 64rem) {
  :root {
    --cols: 12;
    --margin: 4rem;
    --lh: 1.875;
    --t-h1: var(--t6);
    --t-h2: var(--t4);
    --t-h3: var(--t2);
    --y-section: 6rlh;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: 0s linear; }
}