/* まなぶんワールド — 見た目の トークン（A3 第1段・2026-10-14・#386）
   ・値は style.css に あった 生の 値と まったく 同じ（見た目は 1px も 変えない。写しの 比べで 差 0 を 確かめた）
   ・名前は 役割で：色＝--c-*・角＝--r-*・影＝--sh-*・余白＝--sp-*・字＝--fs-*
   ・前から ある 変数（--ink・--cta・--head・--r-s・--sp-in など）は style.css の :root に そのまま 残し、名前を 変えない
   ・ここの 値に 要素ごとの 変数（--c・--cd・--cl）を 入れない（:root で 解かれて 効かなく なる）
   ・数字の 名前（--fs-18・--r-28 など）は 第2段で 段の 名前に まとめる 予定
   ・見本帳：app/_etc/catalog.html */
:root {
  /* 色：白・黒 */
  --c-white: #fff;
  --c-black: #000;
  /* 色：字 */
  --c-ink-strong: #2f2a28;   /* こい 字（説明・数字） */
  --c-ink-sub: #8a7262;      /* うすい 字（ラベル） */
  --c-ink-note: #7a6d65;     /* カードの 小さい 説明 */
  /* 色：縁取りの 字の 影 */
  --c-outline-brown: #6b3a1e;
  --c-outline-red: #c4462f;
  --c-outline-indigo: #5a5fb8;
  /* 色：だいだい・黄（ゲージ・ほのお・ごほうび） */
  --c-fire: #ff7a1a;
  --c-orange: #ff9a2a;
  --c-orange-l: #ffb347;
  --c-orange-edge: #b8510c;
  --c-amber-l: #ffd27a;
  --c-yellow: #ffd84d;
  /* 色：ゲージの 下地 */
  --c-track: #eadfd3;
  /* 色：すける 白・黒・線 */
  --c-white-0: rgba(255,255,255,0);
  --c-white-35: rgba(255,255,255,.35);
  --c-white-40: rgba(255,255,255,.4);
  --c-white-45: rgba(255,255,255,.45);
  --c-white-55: rgba(255,255,255,.55);
  --c-white-75: rgba(255,255,255,.75);
  --c-white-92: rgba(255,255,255,.92);
  --c-white-95: rgba(255,255,255,.95);
  --c-black-12: rgba(0,0,0,.12);
  --c-black-25: rgba(0,0,0,.25);
  --c-line-12: rgba(107,74,58,.12);
  --c-line-15: rgba(107,74,58,.15);
  --c-shade-25: rgba(30,40,80,.25);

  /* 角 */
  --r-pill: 999px;   /* 横長の 丸い ボタン・札・ゲージ */
  --r-round: 50%;    /* まん丸 */
  --r-12: 12px;
  --r-16: 16px;
  --r-22: 22px;
  --r-28: 28px;

  /* 影（字の 値だけ。要素ごとの 色は style.css 側で 足す） */
  --sh-edge: 0 4px 0 rgba(107,74,58,.15);        /* 白い 札の 厚み */
  --sh-edge-5: 0 5px 0 rgba(107,74,58,.12);
  --sh-edge-8: 0 8px 0 rgba(107,74,58,.15);
  --sh-hi: inset 0 3px 0 #fff;                    /* 上の 光（白） */
  --sh-hi-40: inset 0 3px 0 rgba(255,255,255,.4); /* 上の 光（うすい） */
  --sh-sink: inset 0 2px 3px rgba(0,0,0,.12);     /* へこみ */
  --sh-btn-hi: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.08); /* .btn の 光と 下の かげ */

  /* 字の 大きさ */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-34: 34px;

  /* 余白（8・16・32・48 は 前から ある --sp-in・--sp-group・--sp-between・--sp-section を 使う） */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-20: 20px;
  --sp-24: 24px;
}