@charset "UTF-8";
/* =========================================================
   tokens.css — 移行後のデザインの変数（色・字体・寸法・動き）

   もとは style.css の「1. Design Tokens」で、値はそのまま（2026-10-12 に移した）。
   移行後の表示は style.css・content.css・tools.css がこれを使い、layout.php が style.css より先に読む。
   SWELL の表示（元テーマのCSSだけを読む）では、記事の中の道具（tools.css）があるページだけ読む
   （manage の tasks/nabe/done/manage_swell-fps-tools-css.md）。SWELL の表示には明暗の切り替え
   （data-theme）が無いので、下のダークの塊は効かない。
   ========================================================= */

:root {
  /* 既定はライト。ダークは切り替えボタンで選んだときだけ
     （[data-theme="dark"]）。OS の設定には追従しない。 */
  color-scheme: light;

  /* color */
  --c-bg:        #ffffff;
  --c-bg-sub:    #f5f5f5;
  --c-bg-inv:    #0f0f0f;
  --c-text:      #111111;
  --c-text-body: #222222;   /* 記事本文だけ少し柔らかく */
  --c-text-sub:  #6b6b6b;
  --c-text-inv:  #fafafa;
  --c-text-inv-sub: #858585;   /* 反転した面（フッター）の控えめな文字。黒い下地の上で 5.19:1 */
  --c-line:      #e4e4e4;
  --c-line-str:  #111111;
  --c-accent:    #111111;
  --c-shade:     rgba(17, 17, 17, 0.30);   /* 横スクロールする枠の、まだ続く側に出す影 */

  /* typography */
  --f-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
            "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --f-en:   "Helvetica Neue", Arial, sans-serif;
  --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* metrics */
  --w-container: 1180px;
  --w-side:      320px;
  --gap-col:     56px;
  --bar-h:       40px;   /* ヘッダー1行目（サイト名と運営サイト）。追従しない */
  --nav-h:       56px;   /* ヘッダー2行目（ナビと道具）。これだけ追従する */
  --header-h:    56px;   /* 追従する高さ＝2行目。追従の TOC やアンカーの余白がこれを見る */

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:       #0d0d0d;
  --c-bg-sub:   #171717;
  --c-bg-inv:   #fafafa;
  --c-text:     #ededed;
  --c-text-body:#ededed;
  --c-text-sub: #9a9a9a;
  --c-text-inv: #0d0d0d;
  --c-text-inv-sub: #696969;   /* ダークではフッターの下地が白へ反転するので、別の色が要る。5.25:1 */
  --c-line:     #292929;
  --c-line-str: #ededed;
  --c-accent:   #ededed;
  --c-shade:    rgba(237, 237, 237, 0.34);
}