/* ========================================
   蓝色系主题设计令牌 (Blue Theme Tokens)
   覆盖 theme.css 中的颜色相关变量
   通过 [data-color-theme="blue"] 激活
   风格：专业蓝 + 青色强调 + 冷色调渐变
   ======================================== */

html[data-color-theme="blue"] {
    /* ===== 品牌色（蓝色系） ===== */
    --brand-primary: #2563EB;
    --brand-primary-light: #3B82F6;
    --brand-primary-dark: #1D4ED8;
    --brand-primary-glow: rgba(37, 99, 235, 0.4);

    /* ===== 品牌强调色（青色） ===== */
    --brand-accent: #06B6D4;
    --brand-accent-light: #22D3EE;
    --brand-accent-dark: #0891B2;
    --brand-accent-hover: #22D3EE;

    /* ===== 辅助品牌色 ===== */
    --brand-coral: #93C5FD;
    --brand-coral-light: #BFDBFE;

    --brand-terracotta: #60A5FA;
    --brand-terracotta-light: #93C5FD;

    --brand-amber: #8B5CF6;
    --brand-amber-light: #A78BFA;

    --brand-rose: #6366F1;
    --brand-rose-light: #818CF8;

    --brand-mint: #DBEAFE;

    /* ===== 品牌色浮层阴影 ===== */
    --shadow-float:
        0 20px 40px rgba(37, 99, 235, 0.12),
        0 8px 16px rgba(37, 99, 235, 0.08);

    --shadow-glow-primary:
        0 0 30px rgba(37, 99, 235, 0.3),
        0 0 60px rgba(37, 99, 235, 0.15);

    /* ===== 渐变色系（蓝青色） ===== */
    --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #06B6D4 50%, #8B5CF6 100%);
    --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #60A5FA 50%, #22D3EE 100%);
    --gradient-warm: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%);
    --gradient-soft: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 100%);
    --gradient-sunset: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 50%, #3B82F6 100%);

    /* ===== 语义别名（跟随品牌色变化） ===== */
    --accent-color: var(--brand-primary);

    /* ===== 底纹装饰（蓝色主题 - 柔和菱形网格） ===== */
    --pattern-opacity: 0.10;
    --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' stroke='%232563EB' stroke-width='0.5' fill='none'/%3E%3Cpath d='M-30 60L0 30L-30 0L-60 30Z' stroke='%232563EB' stroke-width='0.3' fill='none'/%3E%3C/svg%3E");
    --bg-pattern-dot: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='0.8' fill='%232563EB' fill-opacity='1'/%3E%3C/svg%3E");
    --bg-pattern-grid: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='80' height='80' fill='none' stroke='%232563EB' stroke-width='0.3' stroke-opacity='0.5'/%3E%3C/svg%3E");
}

/* ===== 覆盖 btn-primary 中硬编码的橙色 ===== */
[data-color-theme="blue"] .btn-primary {
    box-shadow:
        0 4px 16px rgba(37, 99, 235, 0.3),
        0 2px 4px rgba(37, 99, 235, 0.2);
}

[data-color-theme="blue"] .btn-primary:hover {
    box-shadow:
        0 8px 28px rgba(37, 99, 235, 0.35),
        0 4px 12px rgba(37, 99, 235, 0.25);
}

[data-color-theme="blue"] .btn-primary:active {
    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.25),
        0 2px 4px rgba(37, 99, 235, 0.15);
}

/* ===== 覆盖 btn-outline hover 颜色 ===== */
[data-color-theme="blue"] .btn-outline:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
}

/* ===== 覆盖 focus-visible 颜色 ===== */
[data-color-theme="blue"] .btn:focus-visible,
[data-color-theme="blue"] input:focus-visible,
[data-color-theme="blue"] button:focus-visible {
    outline-color: rgba(59, 130, 246, 0.3);
}

[data-color-theme="blue"] a:focus-visible {
    outline-color: var(--brand-accent);
}

/* ===== 覆盖 ::selection 背景色 ===== */
[data-color-theme="blue"] ::selection {
    background: var(--brand-terracotta);
}