/* =========================================================================
   共通デザイントークン  tokens.css
   すべての成果物(Web/レポート/スライド)はこの変数を土台にする。
   色を変えたいときは :root の --brand 系だけ差し替える。配色プリセットは末尾。
   ========================================================================= */

:root {
  /* ---- ブランド色(既定: 落ち着いたインディゴ)。案件に合わせて差し替え可 ---- */
  --brand:        #4f46e5;   /* 主役。ボタン/リンク/強調に少しだけ使う */
  --brand-strong: #3730a3;   /* 濃いめ。グラデ終点・見出し */
  --brand-soft:   #eef2ff;   /* 薄い面。バッジ/カード背景 */
  --accent:       #0ea5e9;   /* 補助アクセント(使いすぎない) */

  /* ---- 文字・背景・線(ニュートラル) ---- */
  --ink:        #14181f;     /* 本文。真っ黒は避け少し柔らかく */
  --ink-soft:   #3a4150;     /* 小見出し・濃いめ本文 */
  --muted:      #6b7280;     /* 補足・キャプション */
  --bg:         #ffffff;     /* ベース背景 */
  --bg-subtle:  #f7f8fa;     /* セクション交互・ページ地 */
  --surface:    #ffffff;     /* カード面 */
  --line:       #e6e8ec;     /* 罫線。濃い枠線より薄線+余白で区切る */
  --line-soft:  #f0f1f4;

  /* ---- 状態色 ---- */
  --ok:   #059669;
  --warn: #d97706;
  --bad:  #dc2626;

  /* ---- タイポ(日本語前提の堅牢なフォントスタック) ---- */
  --font-sans: "Inter","Helvetica Neue","Hiragino Kaku Gothic ProN",
               "Yu Gothic","Meiryo",system-ui,sans-serif;
  --font-serif: "Charter","Georgia","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-mono: "SFMono-Regular","Consolas","Menlo",monospace;

  /* モジュラースケール(比率1.25)。バラバラな文字サイズを禁止し階層を明確に */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.25rem;
  --fs-xl:   1.563rem;
  --fs-2xl:  1.953rem;
  --fs-3xl:  2.441rem;
  --fs-4xl:  3.052rem;
  --leading:       1.8;   /* 本文行間。日本語は広めが読みやすい */
  --leading-tight: 1.3;   /* 見出し */

  /* ---- 余白スケール(8px基準)。これ以外の中途半端な余白は使わない ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- 角丸・影・レイアウト ---- */
  --radius-sm: 8px;  --radius: 14px;  --radius-lg: 20px;  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(20,24,31,.05);
  --shadow:    0 2px 8px rgba(20,24,31,.06), 0 1px 2px rgba(20,24,31,.04);
  --shadow-lg: 0 12px 32px rgba(20,24,31,.10);
  --measure: 720px;   /* 本文の最大幅(読みやすさ)。長文はこれを超えない */
  --container: 1120px;/* アプリ/LPの最大幅 */
}

/* ========================= 配色プリセット =========================
   <body class="theme-editorial"> のように付けると配色が切り替わる。
   案件のトーンに合うものを1つ選ぶ(無難な既定インディゴから逃げる)。 */

.theme-editorial { /* 上品・読み物・コンサル資料向き(温かいネイビー×琥珀) */
  --brand:#1f3a5f; --brand-strong:#152a47; --brand-soft:#eef3f9; --accent:#c2872b;
}
.theme-tech {      /* プロダクト/SaaS/技術系(ティール) */
  --brand:#0d9488; --brand-strong:#0f766e; --brand-soft:#ecfdf5; --accent:#6366f1;
}
.theme-finance {   /* 金融・ビジネス・信頼感(ディープネイビー) */
  --brand:#1e3a8a; --brand-strong:#1e2f6b; --brand-soft:#eef2ff; --accent:#0891b2;
}
.theme-vivid {     /* 若年向け・LP・キャンペーン(鮮やかパープル) */
  --brand:#7c3aed; --brand-strong:#6d28d9; --brand-soft:#f5f3ff; --accent:#ec4899;
}

/* ---- ダークテーマ(ダッシュボード等) ---- */
.theme-dark {
  --ink:#e7eaf0; --ink-soft:#c2c8d4; --muted:#9aa3b2;
  --bg:#0f1117; --bg-subtle:#151823; --surface:#1a1e2b;
  --line:#262b39; --line-soft:#1f2330;
}