/*
 * カラートークン（唯一の色定義ファイル）
 * パターン: meta.ai 風（カラフルなグラデーション）。
 *   象徴は「青 → 紫 → ピンク」のイリデセントなグラデーション（アバターのオーブ・
 *   送信ボタン・フォーカス・装飾アクセントに使用）。面は白〜極淡、文字は近黒。
 *   レイアウトはエアリー（広い余白・少ない罫線・大きな丸い入力欄）。
 * コントラスト方針（WCAG AA）:
 *   本文 text #1c1e21 × 白 ≒ 16:1 / sub #65676b × 白 ≒ 4.7:1
 *   リンク accent-text #6a3ff0 × 白 ≒ 5.9:1
 *   文字のせ CTA は grad-cta（青→紫・濃いめ）を使い白文字 4.5:1 以上を確保。
 *   鮮やかな grad-accent（ピンクを含む）は図形（オーブ・アイコン）に限定。
 * 色みを変えたいときはこの数値だけ差し替える（他ファイルは var() 参照のみ）。
 */
:root {
  /* 象徴グラデーション（青→紫→ピンク）。図形・アイコン・装飾に使用 */
  --grad-accent: linear-gradient(120deg, #1d7cff 0%, #7b5cff 48%, #ff5ca8 100%);
  /* 文字をのせる CTA 用（青→紫・濃いめ＝白文字が読める） */
  --grad-cta: linear-gradient(120deg, #2563eb 0%, #6e5cf6 100%);
  --ring: rgba(110, 92, 246, 0.55); /* フォーカスリング色（モードで上書き） */

  /* 単色フォールバック（グラデが使えない箇所用） */
  --color-primary: #6e5cf6;
  --color-primary-strong: #5a44e8;
  --color-on-primary: #ffffff;
  --color-accent-text: #6a3ff0; /* 白背景上のリンク文字（下線併用） */

  /* 面・背景（明るい・エアリー） */
  --color-bg-page: #ffffff; /* ページ背景（白） */
  --color-surface: #ffffff; /* カード・入力欄・チップ面 */
  --color-ai-bubble: #eef0f3; /* AI 吹き出し（ライトグレー） */
  --color-user-bubble: #ece9fb; /* ユーザー吹き出し（淡いラベンダー） */
  --color-tint: #f5f3ff; /* ごく淡い紫みの面（チップ・出口リンク） */

  /* ニュートラル */
  --color-text: #1c1e21; /* 本文・見出し（近黒） */
  --color-text-sub: #65676b; /* 補足・キャプション（グレー） */
  --color-border: #d9dbe1; /* 機能的境界 */
  --color-divider: #e9eaee; /* 装飾的区切り・面の縁 */
  --color-disabled-bg: #e9eaee;
  --color-disabled-text: #9aa0a6;

  /* セマンティック（エラーは視認性のため赤を維持） */
  --color-error: #c01929;
  --color-error-bg: #fdecee;
  --color-error-border: #f7c5cb;

  /* 注意書きの帯（最上部・目立つ色） */
  --color-notice-bg: #fff6e6;
  --color-notice-text: #6b4e00;
  --color-notice-border: #f1e2bd;

  /* 影（柔らか・浮遊感） */
  --shadow-bubble: 0 1px 2px rgba(20, 20, 40, 0.06), 0 6px 18px rgba(20, 20, 40, 0.05);
  --shadow-pill: 0 6px 28px rgba(90, 68, 232, 0.16);
  --shadow-card: 0 24px 64px rgba(20, 20, 40, 0.22);

  /* 背景の淡いグロー（先進的な雰囲気・テキストの可読性を保つ低彩度） */
  --glow:
    radial-gradient(60% 50% at 85% -5%, rgba(123, 92, 255, 0.1), transparent 70%),
    radial-gradient(55% 45% at -5% 8%, rgba(29, 124, 255, 0.08), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(255, 92, 168, 0.07), transparent 70%);
}


/* 契約者（Ciras杉本）モードの配色。未契約者版（青→紫→ピンク）と差を付ける（ティール/ブルー系）。 */
body.mode-member {
  --grad-accent: linear-gradient(120deg, #0fb39a 0%, #1f8fd6 100%);
  --grad-cta: linear-gradient(120deg, #0e7c6b 0%, #155e9c 100%);
  --color-primary: #128a76;
  --color-primary-strong: #0e6f5f;
  --color-accent-text: #0f766e; /* teal-700・白背景で約5:1 */
  --color-user-bubble: #d8f0ea; /* 淡いティール */
  --color-tint: #e8f7f3;
  --ring: rgba(15, 118, 110, 0.55);
  --glow:
    radial-gradient(60% 50% at 85% -5%, rgba(16, 150, 130, 0.12), transparent 70%),
    radial-gradient(55% 45% at -5% 8%, rgba(31, 143, 214, 0.1), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(16, 185, 129, 0.08), transparent 70%);
}