/* =====================================================================
 * Infinityline AI — 公開サイト CSS 変数
 * 管理画面とブランドカラーを共有（コバルトブルー）
 * ===================================================================== */

:root {
    /* 背景 */
    --bg-primary:    #ffffff;
    --bg-secondary:  #f7f8fa;
    --bg-tertiary:   #eef1f5;
    --bg-dark:       #0f1115;
    --bg-hover:      rgba(31, 72, 212, 0.06);

    /* テキスト */
    --text-primary:   #15181d;
    --text-secondary: #5a5f6a;
    --text-muted:     #8a909c;
    --text-inverse:   #ffffff;

    /* 境界線 */
    --border:        #e2e6ec;
    --border-strong: #cbd1da;

    /* アクセント（コバルトブルー）*/
    --accent:        #1f48d4;
    --accent-hover:  #1838ac;
    --accent-soft:   rgba(31, 72, 212, 0.10);
    --accent-grad:   linear-gradient(135deg, #1f48d4 0%, #4c7cff 100%);
    --accent-fg:     #ffffff;

    /* セマンティック */
    --success:  #2e7d32;
    --warning:  #ed6c02;
    --danger:   #d32f2f;

    /* タイポグラフィ */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    --font-display: var(--font-sans);

    /* レイアウト */
    --header-height: 64px;
    --container-max: 1200px;

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

    /* 影 */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);

    /* トランジション */
    --tr-fast: 140ms ease;
    --tr-base: 220ms ease;

    /* z-index */
    --z-header:  100;
    --z-dropdown: 200;
    --z-modal:    300;
}

/* ダークテーマ（任意切替）*/
[data-theme="dark"] {
    --bg-primary:    #0f1115;
    --bg-secondary:  #15181d;
    --bg-tertiary:   #1c1f26;
    --bg-hover:      rgba(76, 124, 255, 0.10);

    --text-primary:   #f2f4f7;
    --text-secondary: #a4abb7;
    --text-muted:     #6b7280;

    --border:        #2c323d;
    --border-strong: #3a4150;

    --accent:        #4c7cff;
    --accent-hover:  #6a90ff;
    --accent-soft:   rgba(76, 124, 255, 0.16);

    --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}