@charset "UTF-8";
/*
 * tokens.css — 設計トークン（全ページ共通）
 * 色・タイポグラフィ・余白・角丸・影・幅・z-index を CSS 変数で一元管理する。
 * 値の変更はこのファイルのみで完結させ、各CSSは変数を参照する（DRY/保守性）。
 */

:root {
  /* ブランドカラー（素材READMEのハードコード値に準拠） */
  --c-blue: #2c4fe0;       /* 主役ブルー */
  --c-blue-strong: #1a47b8;
  --c-cyan: #169dda;       /* シアン */
  --c-blue-light: #85b7eb; /* 薄ブルー */
  --c-coral: #ff5c8a;      /* AIアクセント（AI機能専用） */

  /* グレースケール / テキスト */
  --c-text: #1f2937;
  --c-text-muted: #5b6573;
  --c-text-invert: #ffffff;
  --c-text-invert-muted: #a5a5a5;
  --c-line: #e5e7eb;
  --c-bg-dark: #272727;
  --c-bg-darker: #1e1e1e;

  /* 状態色 */
  --c-focus: #2c4fe0;

  /* グラデーション */
  --grad-hero: linear-gradient(135deg, rgba(22, 157, 218, 1) 0%, rgba(72, 63, 255, 1) 100%);
  --grad-trial: linear-gradient(135deg, #169dda 0%, #3666ff 100%);

  /* タイポグラフィ */
  --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Yu Gothic", sans-serif;
  /* v2 はフラットなタイポグラフィ: 本文・見出しのウェイトは一律 400。
     強調を効かせるのは CTA ボタンのみ（--fw-cta）。
     既存の --fw-medium / --fw-bold 参照を活かしつつ実値を 400 に寄せている。 */
  --fw-normal: 400;
  --fw-medium: 400;
  --fw-bold: 400;
  --fw-cta: 700;   /* CTAボタン専用ウェイト */
  --lh-base: 1.7;
  --lh-tight: 1.3;

  /* 角丸 */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 12px;
  --radius-pill-lg: 100px;

  /* 影 */
  --shadow: 0 8px 24px -8px #1118272e;
  --shadow-blue: 0 16px 48px -12px #2c4fe080;
  --shadow-button-hover: 0 18px 42px -18px #11182773, 0 10px 26px -14px #2c4fe080;

  /* レイアウト幅（仕様: ヘッダー1680 / 本文1480 / 読み物960） */
  --header-max: 1680px;
  --page-max: 1480px;
  --container-max: 1480px;
  --container-narrow: 960px;
  --container-pad: 1.25rem;

  /* ヘッダー（fixed） */
  --header-h: 64px;
  --header-nav-offset: 40px; /* ロゴ右端〜「料金プラン」左端 */

  /* z-index 体系 */
  --z-header: 1000;
  --z-sticky-bar: 900;
  --z-overlay: 1050;

  /* トランジション */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .4s;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
    --header-h: 72px;
  }
}