/**
 * Design Tokens — single source of truth (PR1 Step 1)
 * design-system.css の :root をここへ移設（値の変更なし = 視覚無風）。
 * 以後この :root が全 CSS 変数の唯一の定義元。base_v2 / sender_verification が
 * design-system.css の前に読み込む。Tier1 非色トークンは後続コミットで追記。
 */
    :root {
        /* ========== プライマリーカラー (後方互換: Standard Trust へリダイレクト) ========== */
        --primary-blue: var(--color-primary);
        --primary-blue-hover: var(--color-primary-hover);
        --primary-blue-light: var(--color-primary-soft);

        /* ========== レイアウトカラー ========== */
        --bg-sidebar: #001529;              /* ダークサファイアブルー */
        --bg-header: #FFFFFF;
        --bg-body: #F3F4F6;
        --bg-primary: #FFFFFF;
        --bg-hover: #F9FAFB;

        /* ========== テキストカラー ========== */
        --text-primary: #1F2937;
        --text-secondary: #5F6368;
        --text-tertiary: #9CA3AF;
        --text-placeholder: #D1D5DB;
        --text-sidebar-main: #FFFFFF;
        --text-sidebar-sub: #FFFFFF;

        /* ========== ボーダーカラー ========== */
        --border-light: #E5E7EB;

        /* ========== ステータスカラー ========== */
        --status-success-bg: #E6F4EA;
        --status-success-text: #137333;
        --status-warning-bg: #FEF7E0;
        --status-warning-text: #B06000;
        --status-info-bg: #E8F0FE;
        --status-info-text: #1967D2;
        --status-neutral-bg: #F1F3F4;
        --status-neutral-text: #5F6368;
        --status-danger-bg: #FEE2E2;
        --status-danger-text: #DC2626;

        /* ========== シャドウ定義 ========== */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

        /* ========== Standard Trust トークン ========== */
        /* Brand */
        --color-primary: #00796B;
        --color-primary-light: #4DB6AC;
        --color-primary-soft: #E0F2F1;
        --color-primary-hover-soft: #B2DFDB;
        --color-primary-hover: #00695C;
        --color-on-primary: #FFFFFF;

        /* Background / Surface */
        --color-bg: #F8FAFC;
        --color-surface: #FFFFFF;

        /* Text */
        --color-text-main: #1E293B;
        --color-text-sub: #64748B;
        --color-text-muted: #94A3B8;

        /* Border */
        --color-border: #E2E8F0;
        --color-border-muted: #CBD5E1;

        /* Status */
        --color-success-text: #15803D;
        --color-success-bg: #F0FDF4;
        --color-warning-text: #C2410C;
        --color-warning-bg: #FFF7ED;
        --color-danger-text: #DC2626;
        --color-danger-bg: #FEE2E2;
        --color-danger-hover: #B91C1C;

        /* Neutral */
        --color-neutral-text: #64748B;
        --color-neutral-bg: #F1F5F9;

        /* Info (新設) - 情報・お知らせ系（青） */
        --color-info-bg: #DBEAFE;
        --color-info-text: #1E40AF;
        --color-info-border: #93C5FD;

        /* Code surface - 埋め込みスニペット等のコード表示面 (ダーク固定面) */
        --color-code-bg: #1F2937;
        --color-code-text: #E5E7EB;

        /* AI Accent (AI 機能 UI 専用 - スコープ封じ込め) */
        --ai-accent: #7C3AED;
        --ai-accent-hover: #5B21B6;
        --ai-accent-soft: #F3E8FF;

        /* ========== 企業アイコン ========== */
        --company-icon-bg: #e0e7ff;
        --company-icon-text: #4f46e5;

        /* ========== React互換エイリアス ========== */
        /* ページ固有CSSが短縮名を使う場合に解決するためのエイリアス */
        --primary-color: var(--color-primary);
        --primary: var(--color-primary);
        --danger: var(--color-danger-text);
        --danger-color: var(--color-danger-text);
        --error: var(--color-danger-text);
        --error-color: var(--color-danger-text);
        --error-bg: var(--color-danger-bg);
        --success: var(--status-success-text);
        --success-color: var(--status-success-text);
        --success-bg: var(--status-success-bg);
        --warning: var(--status-warning-text);
        --warning-bg: var(--status-warning-bg);
        --info: var(--status-info-text);
        --info-bg: var(--status-info-bg);
        --bg-secondary: var(--bg-hover);
        --card-bg: var(--bg-primary);
        --border-color: var(--color-border);
        --color-bg-secondary: var(--bg-hover);
        --color-bg-hover: var(--bg-hover);

        /* ========== 非色トークン (Tier 1・2026-07-19 §3.5) — 定義のみ・使用は ratchet 移行 ========== */
        /* Radius */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
        --radius-full: 999px;
        /* Z-index ladder（現状 1〜10000 の無秩序を契約化） */
        --z-base: 0;
        --z-raised: 1;
        --z-dropdown: 1000;
        --z-sticky: 1100;
        --z-overlay: 1200;
        --z-modal: 1300;
        --z-popover: 1400;
        --z-toast: 1500;
        /* Motion */
        --duration-fast: 120ms;
        --duration-base: 200ms;
        --duration-slow: 320ms;
        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
        /* Focus ring（brand 追従・半透明。値は Step 3 適用時に a11y 検証で最終化） */
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
        /* elevation は既存 --shadow-sm / --shadow-md / --shadow-lg を使用（上部で定義済み） */
    }