/* ==========================================================================
   CEHub デザイントークン（ライト＝既定 / ダーク＝html[data-ce-theme=dark]）
   Circular Insight ツール群・上書きCSS版（v0.4〜）と同じ体系。
   コンポーネントは必ずこの変数を参照する（生の色コードを書かない）。
   ========================================================================== */
:root {
  /* ブランド */
  --ce-primary: #0289c9;
  --ce-primary-dark: #026a9c;
  --ce-primary-soft: #5cc0ec;
  --ce-accent-soft: #e2f1f9;

  /* テキスト（本文 --ce-text は 2026-08-14 に一段濃く: #41525c → #2e3e49） */
  --ce-ink: #152730;
  --ce-text: #2e3e49;
  --ce-text-soft: #4e5b64;

  /* 面（本文背景は薄灰色、カードは白 = カードが引き立つ。2026-08-14 ユーザー要望） */
  --ce-bg: #f4f6f8;
  --ce-card: #ffffff;
  --ce-line: #e2e9ee;
  --ce-footer: #15242c;

  /* 形・影・動き */
  --ce-radius: 14px;
  --ce-shadow: 0 2px 10px rgba(20, 40, 50, 0.07);
  --ce-shadow-hover: 0 14px 30px rgba(20, 40, 50, 0.14);
  --ce-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* タイポ: 現行サイト踏襲（2026-08 ユーザー決定）。
     欧文 Montserrat（functions.php で Google Fonts を読み込み）＋和文ゴシック */
  /* Hiragino Sans を ProN より先に（多段ウェイトがあり font-weight:500 が自然に出る） */
  --ce-font: "Montserrat", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, system-ui, sans-serif;

  /* 文字サイズ（Aa切替は --ce-scale を 1 → 1.15 に変えるだけで全体が追随） */
  --ce-scale: 1;
  --ce-fs-body: calc(16.5px * var(--ce-scale));
  --ce-fs-title-card: calc(16px * var(--ce-scale));
  --ce-fs-title-post: calc(30px * var(--ce-scale));
  --ce-fs-meta: calc(11.5px * var(--ce-scale));
}

/* スマホは画面幅に対して本文が大きく見えるので、ほんの少し下げる（2026-08-16） */
@media (max-width: 600px) {
  :root { --ce-fs-body: calc(15.5px * var(--ce-scale)); }
}

/* 文字サイズ「大」 */
html[data-ce-fontsize="large"] {
  --ce-scale: 1.15;
}

/* ダークモード */
html[data-ce-theme="dark"] {
  --ce-ink: #eaf1f5;
  --ce-text: #b1c0c8;
  --ce-text-soft: #83919b;
  --ce-bg: #0e161b;
  --ce-card: #16222b;
  --ce-line: #243139;
  --ce-accent-soft: #0d2733;
  --ce-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.35);
  --ce-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.5);
}