/* =====================================================================
   tokens.css — まるごとSNS デザイントークン (PR-5a, 2026-07-03)

   目的:
   - Ph5 後続PR (契約画面/ウィザード/ダッシュボード/管理コンソール) が
     一貫したデザインで組めるよう、色/余白/角丸/影/文字サイズを
     意味名トークンとして 1 ファイルに集約する。
   - 既存 UI の描画は変えない。index.html の :root 旧変数
     (--blue-dark 等 = ViralForge 時代の名前残骸、値はオレンジに上書き済み)
     は本ファイルの新トークンを参照するエイリアスとして温存し、
     後続PRで段階的に旧名を廃止する。

   命名規則:
   - 全トークン --mg- プレフィックス (既存 --wv3-/--sns- 等と衝突しない)。
   - 数値スケールでなく用途 (意味) で命名する。

   旧変数 → 新トークン対応表 (index.html :root のエイリアス):
     --blue-dark  #7c3a0f → --mg-primary-deep
     --blue-mid   #d97a1e → --mg-primary-strong
     --blue-light #f0a35a → --mg-primary-soft
     --blue-pale  #f9e2cb → --mg-primary-pale
     --blue-bg    #fdf6ee → --mg-bg-page
     --white      #ffffff → --mg-bg-surface
     --gray-dark  #2e231a → --mg-text
     --gray       #5c5248 → --mg-text-secondary
     --gray-light #8a7d6e → --mg-text-muted
     --border     #f8e3cd → --mg-border
     --success    #27ae60 → --mg-success
     --danger     #e74c3c → --mg-danger
     --warning    #f39c12 → --mg-warning
   ===================================================================== */

:root {
    /* ---- 色: プライマリ (ブランドオレンジ #ef7d1a 系の段階) ---- */
    --mg-primary: #ef7d1a;          /* ブランドオレンジ (ロゴ/新規UIの主アクション) */
    --mg-primary-hover: #d96a12;    /* --mg-primary の hover/active */
    --mg-primary-strong: #d97a1e;   /* 既存UIの主アクション色 (旧 --blue-mid) */
    --mg-primary-deep: #7c3a0f;     /* 濃色/見出し/hover の深いオレンジ茶 (旧 --blue-dark) */
    --mg-primary-soft: #f0a35a;     /* 淡いアクセント (旧 --blue-light) */
    --mg-primary-pale: #f9e2cb;     /* 選択中背景などのごく淡いオレンジ (旧 --blue-pale) */

    /* ---- 色: テキスト階層 ---- */
    --mg-text: #2e231a;             /* 本文 (旧 --gray-dark) */
    --mg-text-secondary: #5c5248;   /* 補足 (旧 --gray) */
    --mg-text-muted: #8a7d6e;       /* 弱い注記/placeholder (旧 --gray-light) */
    --mg-text-inverse: #ffffff;     /* 濃色背景上の文字 */

    /* ---- 色: 背景 ---- */
    --mg-bg-page: #fdf6ee;          /* ページ背景 (旧 --blue-bg) */
    --mg-bg-surface: #ffffff;       /* カード/モーダル等の面 (旧 --white) */
    --mg-bg-subtle: #fdfbfa;        /* 行 hover/薄い区切り面 */
    --mg-bg-hover: #faf3ea;         /* secondary hover / テーブルヘッダ */
    --mg-bg-disabled: #f0e9e0;      /* disabled control */
    --mg-text-disabled: #b0a494;    /* disabled control text */

    /* ---- 色: 境界 ---- */
    --mg-border: #f8e3cd;           /* 標準の境界線 (旧 --border) */
    --mg-border-strong: #e8dbcf;    /* 入力欄などやや濃い境界線 */

    /* ---- 色: 状態 ---- */
    --mg-success: #1e9e57;          /* 旧 --success */
    --mg-success-bg: #e6f4ea;
    --mg-success-border: #b7e0c3;
    --mg-success-text: #1d6f42;
    --mg-warning: #f39c12;          /* 旧 --warning */
    --mg-warning-bg: #fff3cd;
    --mg-warning-border: #f0dfa6;
    --mg-warning-text: #856404;
    --mg-danger: #e74c3c;           /* 旧 --danger */
    --mg-danger-strong: #c0392b;    /* danger の hover */
    --mg-danger-bg: #fde7e9;
    --mg-danger-border: #f3c2ba;
    --mg-danger-text: #721c24;
    --mg-info: #2b6cb0;
    --mg-info-bg: #e8f1fa;
    --mg-info-border: #bcd7f0;
    --mg-info-text: #1d4f82;

    /* ---- サイドバー ---- */
    --mg-sidebar-bg: #262019;
    --mg-sidebar-text: #cec3b6;
    --mg-sidebar-text-active: #ffffff;
    --mg-sidebar-hover: rgba(255, 255, 255, 0.06);
    --mg-sidebar-active-bg: rgba(239, 125, 26, 0.16);

    /* ---- 余白スケール (4px 基準) ---- */
    --mg-space-1: 4px;
    --mg-space-2: 8px;
    --mg-space-3: 12px;
    --mg-space-4: 16px;
    --mg-space-5: 20px;
    --mg-space-6: 24px;
    --mg-space-8: 32px;
    --mg-space-10: 40px;

    /* ---- 角丸 (2段階) ---- */
    --mg-radius-sm: 6px;            /* ボタン/入力欄/バッジ */
    --mg-radius-lg: 10px;           /* カード/モーダル */

    /* ---- 影 (2段階) + フォーカスリング ---- */
    --mg-shadow-sm: 0 1px 3px rgba(46, 35, 26, 0.06);      /* カード */
    --mg-shadow-lg: 0 8px 24px rgba(46, 35, 26, 0.14);     /* モーダル/トースト */
    --mg-focus-ring: 0 0 0 3px rgba(239, 125, 26, 0.18);   /* :focus-visible 用 */
    --mg-focus-ring-danger: 0 0 0 3px rgba(231, 76, 60, 0.15);

    /* ---- フォント ---- */
    --mg-font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
        'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', Roboto,
        Meiryo, sans-serif;

    /* フォントサイズ階層 (12/13/14/16/18/20/24) */
    --mg-font-size-xs: 12px;        /* 注記/バッジ */
    --mg-font-size-sm: 13px;        /* 補足/テーブル */
    --mg-font-size-md: 14px;        /* 本文標準 */
    --mg-font-size-lg: 16px;        /* 強調本文/カード見出し/入力欄 */
    --mg-font-size-xl: 18px;        /* セクション見出し */
    --mg-font-size-2xl: 20px;       /* ページ見出し */
    --mg-font-size-3xl: 24px;       /* 画面タイトル/金額 */

    /* 行間 */
    --mg-line-height: 1.6;          /* 本文 */
    --mg-line-height-tight: 1.35;   /* 見出し/数値 */
}