/* ============================================================
   CloudTech デザイントークン
   ------------------------------------------------------------
   全ページが最初に読む。色・角丸・影・フォント・幅の定義のみ。
   ここにコンポーネントを書かない。

   ページ間で「同じ部品だが色だけ違う」ものは、page-*.css で
   セレクタを上書きするのではなく、ここの変数を差し替えて解決する。
   上書きは同じセレクタが2ファイルに現れる原因になる。
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     カラーの役割分担（CloudTech LMS 本体と統一）
       brand     … 行動を促す色。CTA・強調・数値・eyebrow
       authority … 信頼を担う色。認定バッジ・価格・制度開示
     オレンジ単色にすると 448,000円の認定講座で「軽さ」が出るため、
     LMS本体（front-page.php）と同じ「オレンジ＋濃紺」の二層構成にする。
     ------------------------------------------------------------ */
  --ink: #1a1a2e;
  --ink-2: #4b5563;
  --ink-3: #6b7885;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-alt: #fffaf5;

  /* ブランド＝オレンジ（LMS --accent-primary と同値） */
  --brand: #f97316;
  --brand-dark: #ea580c;
  --brand-tint: #fff7ed;

  /* 権威＝濃紺（LMS ヒーロー背景と同値） */
  --authority: #1a1a2e;
  --authority-2: #16213e;
  --authority-3: #0f3460;
  --authority-tint: #eef1f7;

  /* 副アクセント＝ブルー（LMS --accent-blue と同値）。給付金・制度系に使う */
  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --accent-tint: #e0f2fe;

  --warn-bg: #fff6e8;
  --warn-line: #f3c98b;
  --success: #0d9f6e;
  --success-tint: #ecfdf5;

  /* プランカラー */
  --plan-free: #9CA3AF;
  --plan-sikaku: #2563EB;
  --plan-kihon: #16A34A;
  --plan-eikyuu: #D97706;
  --plan-academy: #DC2626;

  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
  --shadow-lg: 0 4px 12px rgba(26, 26, 46, 0.08), 0 20px 40px rgba(26, 26, 46, 0.1);

  /* 蛍光ペン風のハイライト。ページごとに差し替える想定 */
  --marker: #ffe066;

  /* ヘッダーロゴの高さ。縦2段のロゴを使うページは大きくする */
  --brand-logo-h: 34px;

  --max: 1120px;
  --max-narrow: 760px;

  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo,
    system-ui, -apple-system, "Segoe UI", sans-serif;
}