/* ============================================================
   Design Tokens — CS Agentic AI
   色・余白・タイポグラフィの一元管理
   ============================================================ */

:root {
  /* ============================================================
     カラーパレット（50→900）
     背景・薄トーンは 50/100、ボーダー 200、アクセント 500、
     濃文字 700〜900 を目安に使う。
     ============================================================ */

  /* Brand — Indigo（顧客側ウィジェット）*/
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;

  /* Amber — Warning */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;

  /* Green — Success */
  --green-50:  #ECFDF5;
  --green-100: #D1FAE5;
  --green-200: #A7F3D0;
  --green-300: #6EE7B7;
  --green-400: #34D399;
  --green-500: #10B981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065F46;
  --green-900: #064E3B;

  /* Red — Danger */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;

  /* Blue — Info */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;

  /* Violet — Category accent (運用ポリシー・wismo タグなど) */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;

  /* Gray — Neutral */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ------- ブランド（顧客側ウィジェットで主に使用） -------
     merchant 側のプライマリカラーピッカーで上書きされる前提。
     Indigo 系に戻したい場合は brand-600 系を割り当てる。 */
  --brand: #1A1A1A;
  --brand-hover: #000000;
  --brand-soft: var(--gray-100);

  /* ------- テキスト・ベース ------- */
  --text: var(--gray-900);
  --text-sub: var(--gray-500);
  --text-sub2: #8A8A8A;
  --border: var(--gray-200);
  --border-strong: #CCCCCC;
  --bg: #F2F4F7;
  --surface: #FFFFFF;

  /* ------- Polaris 準拠（事業者側管理画面で主に使用） ------- */
  --p-bg: #F4F5F7;
  --p-surface: #FFFFFF;
  --p-surface-hover: #F7F7F7;
  --p-border: #ECEEF1;
  --p-border-strong: #D7D9DD;
  --p-text: #1A1A1A;
  --p-text-sub: #5C5F66;
  --p-text-sub2: #8A8E96;
  --p-primary: #1A1A1A;
  --p-primary-hover: #000000;
  --p-link: #005BD3;

  /* ------- Admin shell (FlowAI 風の外枠カード化) ------- */
  --admin-page-bg: #EEF0F3;            /* 外側ページ背景（app カードの周り） */
  --admin-app-bg: #FFFFFF;             /* アプリ全体カードの背景 */
  --admin-content-bg: #F4F5F7;         /* コンテンツエリア（topbar 下）の背景 */
  --admin-shell-radius: 20px;          /* 外枠カードの角丸 */
  --admin-card-radius: 14px;           /* 内側のカード類 */
  --admin-shell-shadow: 0 4px 20px rgba(15, 17, 22, 0.04), 0 1px 3px rgba(15, 17, 22, 0.04);

  /* ------- ステータス（パレットのエイリアス） ------- */
  --success: var(--green-500);
  --success-soft: var(--green-50);
  --p-success: #0C5132;
  --p-success-bg: var(--green-50);

  --warning: var(--amber-500);
  --warning-soft: var(--amber-50);
  --p-warning: #8F4700;
  --p-warning-bg: var(--amber-50);

  --err: var(--red-500);
  --err-soft: var(--red-50);
  --p-critical: #8E1F0B;
  --p-critical-bg: var(--red-50);

  --info-soft: var(--blue-50);
  --p-info: #003E82;
  --p-info-bg: var(--blue-50);

  /* ------- Category / Tag colors -------
     ナレッジカテゴリ・実行アクションタグ・カテゴリ選択ピル等で
     共通の塗り分けに使う 4 色ペア（背景 + 文字色）。
     blue → 配送 / 住所変更 系
     red  → 返品・交換・キャンセル系
     amber → 決済・商品 / 返金 系（暖色ベージュ）
     violet → 運用ポリシー / 配送状況確認(wismo) 系 */
  --tag-blue-bg:    var(--blue-100);
  --tag-blue-text:  var(--blue-800);
  --tag-red-bg:     var(--red-100);
  --tag-red-text:   var(--p-critical);
  --tag-amber-bg:   #F5F0E8;
  --tag-amber-text: var(--amber-900);
  --tag-violet-bg:  var(--violet-100);
  --tag-violet-text: var(--violet-800);

  /* ------- Amber 系の使い分け（混同しないための説明）-------
     プロジェクト内に 3 種類の「黄/アンバー」があり、用途で使い分ける:
     1. --p-warning-bg (#FFFBEB / amber-50)  — badge.warning などの控えめな警告
     2. --amber-100   (#FEF3C7)              — status-pill.preparing 等の中濃度ステータス
     3. --tag-amber-bg (#F5F0E8 warm beige) — カテゴリ系タグ（決済/返金）
     色味が近いため、新規追加時は意味で選ぶこと。 */

  /* ------- Code block (JSON 等) ------- */
  --code-block-bg: #1A1A1A;
  --code-block-text: #E1E1E1;

  /* ------- Radius ------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ------- Shadow ------- */
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-widget: 0 20px 48px rgba(17, 24, 39, 0.18), 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.25);
  --shadow-launcher: 0 8px 28px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);

  /* ------- Typography ------- */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-mono: "SF Mono", Menlo, monospace;

  /* Font size scale — 10〜28px、管理画面・本文で頻出する値のみ採用 */
  --fs-2xs: 10px;  /* タグ、極小ラベル */
  --fs-xs:  11px;  /* キャプション、バッジ、sub-meta */
  --fs-sm:  12px;  /* 説明文、メタ情報、2次情報 */
  --fs-md:  13px;  /* 既定 UI 本文、テーブル行、フォームラベル */
  --fs-lg:  14px;  /* カード/セクションタイトル */
  --fs-xl:  15px;  /* 読み物本文（ドキュメント・post-body） */
  --fs-2xl: 16px;  /* h3・設定セクションタイトル */
  --fs-3xl: 20px;  /* h2・ページ見出し */
  --fs-4xl: 22px;  /* page-header h1 */
  --fs-5xl: 28px;  /* editor タイトル・display */

  /* Font weight */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line height */
  --lh-tight:     1.2;   /* display / 大見出し */
  --lh-snug:      1.3;   /* 見出し */
  --lh-ui:        1.4;   /* UI 密度高め */
  --lh-body:      1.5;   /* 既定 */
  --lh-paragraph: 1.55;  /* 長めの説明文 */
  --lh-reading:   1.75;  /* 読み物本文 */

  /* Letter spacing */
  --ls-tight:     -0.01em;  /* 大見出しの密度調整 */
  --ls-uppercase: 0.06em;   /* 全大文字ラベル */

  /* ------- Z-index layer ------- */
  --z-widget: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-proto-bar: 400;
}