/* ========================================
 * Loopes UI — 设计变量（Design Tokens）
 * ========================================
 * 品牌理念：
 * 「Loopes」意为循环/回路/连接，象征持续生长的设计系统。
 * 主色采用经典品牌蓝（Loopes Blue），
 *   源自主题品牌的 #1a73e8 —— 稳重、专业、值得信赖。
 * 辅以「琥珀橙」（Amber）做点缀，
 *   冷暖对比带来温暖活力和高识别度。
 * 整体风格：现代、专业、信赖、温暖。
 * ======================================== */

:root {
    /* ===== 品牌色 =====
     * Loopes Blue：#1A73E8 → #4285F4 → #1557B0
     * 经典品牌蓝，稳重专业值得信赖
     * ============================= */
    --loopes-primary: #1A73E8;
    --loopes-primary-rgb: 26, 115, 232;
    --loopes-primary-hover: #4285F4;
    --loopes-primary-active: #1557B0;
    --loopes-primary-light: #E8F0FE;
    --loopes-primary-lighter: #C6DAFC;
    --loopes-primary-deeper: #0D47A1;
    --loopes-primary-gradient: linear-gradient(135deg, #1A73E8, #4285F4);
    --loopes-primary-gradient-deeper: linear-gradient(135deg, #1A73E8, #0D47A1);

    /* ===== 品牌辅助色 =====
     * 琥珀橙（Amber）—— 温暖点缀，形成高辨识度的冷暖对比
     * ============================= */
    --loopes-amber: #F59E0B;
    --loopes-amber-hover: #D97706;
    --loopes-amber-light: #FFFBEB;

    --loopes-teal: #0D9488;
    --loopes-teal-hover: #0F766E;
    --loopes-teal-light: #F0FDFA;

    /* ===== 语义色 ===== */
    --loopes-success: #10B981;
    --loopes-success-hover: #059669;
    --loopes-success-active: #047857;
    --loopes-success-light: #ECFDF5;
    --loopes-success-border: #A7F3D0;
    --loopes-success-text: #065F46;

    --loopes-error: #EF4444;
    --loopes-error-hover: #DC2626;
    --loopes-error-active: #B91C1C;
    --loopes-error-light: #FEF2F2;
    --loopes-error-border: #FECACA;
    --loopes-error-text: #991B1B;

    --loopes-warning: #F59E0B;
    --loopes-warning-hover: #D97706;
    --loopes-warning-active: #B45309;
    --loopes-warning-light: #FFFBEB;
    --loopes-warning-border: #FDE68A;
    --loopes-warning-text: #92400E;

    --loopes-info: #4285F4;
    --loopes-info-hover: #1A73E8;
    --loopes-info-active: #1557B0;
    --loopes-info-light: #E8F0FE;
    --loopes-info-border: #C6DAFC;
    --loopes-info-text: #0D47A1;

    /* ===== 辅助色 ===== */
    --loopes-purple: #8B5CF6;
    --loopes-purple-light: #F5F3FF;
    --loopes-pink: #EC4899;
    --loopes-pink-light: #FDF2F8;
    --loopes-cyan: #06B6D4;
    --loopes-cyan-light: #ECFEFF;

    /* ===== 中性色 ===== */
    --loopes-text: #0F172A;
    --loopes-text-secondary: #475569;
    --loopes-text-muted: #94A3B8;
    --loopes-text-placeholder: #CBD5E1;
    --loopes-text-inverse: #FFFFFF;
    --loopes-text-dark: #0F172A;
    --loopes-text-light: #64748B;

    --loopes-bg: #FFFFFF;
    --loopes-bg-secondary: #F8FAFC;
    --loopes-bg-tertiary: #F1F5F9;
    --loopes-bg-page: #F0F4F8;
    --loopes-bg-elevated: #FFFFFF;

    --loopes-dark: #0F172A;
    --loopes-dark-secondary: #1E293B;

    --loopes-border: #E2E8F0;
    --loopes-border-light: #F1F5F9;
    --loopes-border-hover: #CBD5E1;

    /* ===== Modal 专用色 ===== */
    --loopes-modal-icon-success-bg: #ECFDF5;
    --loopes-modal-icon-success-fill: #10B981;
    --loopes-modal-icon-error-bg: #FEF2F2;
    --loopes-modal-icon-error-fill: #EF4444;
    --loopes-modal-icon-warning-bg: #FFFBEB;
    --loopes-modal-icon-warning-fill: #F59E0B;
    --loopes-modal-icon-info-bg: #E8F0FE;
    --loopes-modal-icon-info-fill: #1A73E8;

    /* ===== 圆角 ===== */
    --loopes-radius-sm: 6px;
    --loopes-radius: 10px;
    --loopes-radius-lg: 14px;
    --loopes-radius-xl: 18px;
    --loopes-radius-full: 50%;
    --loopes-radius-round: 9999px;

    /* ===== 阴影 ===== */
    --loopes-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --loopes-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --loopes-shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.1);
    --loopes-shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.14);
    --loopes-shadow-color: rgba(26, 115, 232, 0.25);
    --loopes-shadow-color-strong: rgba(26, 115, 232, 0.35);

    /* ===== 间距（4px 网格体系） ===== */
    --loopes-space-1: 4px;
    --loopes-space-2: 8px;
    --loopes-space-3: 12px;
    --loopes-space-4: 16px;
    --loopes-space-5: 20px;
    --loopes-space-6: 24px;
    --loopes-space-8: 32px;
    --loopes-space-10: 40px;
    --loopes-space-12: 48px;
    --loopes-space-16: 64px;

    /* 旧变量兼容 */
    --loopes-space-xs: 4px;
    --loopes-space-sm: 8px;
    --loopes-space: 16px;
    --loopes-space-lg: 24px;
    --loopes-space-xl: 32px;
    --loopes-space-2xl: 40px;

    --loopes-grid-gap: 30px;
    --loopes-hero-padding: 80px 0 100px;
    --loopes-hero-margin-top: -40px;

    /* ===== 字体 ===== */
    --loopes-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Roboto, "Helvetica Neue", Arial, sans-serif;
    --loopes-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", "Courier New", monospace;
    --loopes-font-size: 14px;
    --loopes-font-size-xs: 11px;
    --loopes-font-size-sm: 12px;
    --loopes-font-size-lg: 16px;
    --loopes-font-size-xl: 18px;
    --loopes-font-size-2xl: 20px;
    --loopes-font-size-h3: 20px;
    --loopes-font-size-h2: 24px;
    --loopes-font-size-h1: 28px;
    --loopes-font-size-hero: 36px;
    --loopes-font-size-display: 42px;

    --loopes-line-height-tight: 1.2;
    --loopes-line-height-normal: 1.5;
    --loopes-line-height-relaxed: 1.75;

    --loopes-font-weight-normal: 400;
    --loopes-font-weight-medium: 500;
    --loopes-font-weight-semibold: 600;
    --loopes-font-weight-bold: 700;

    /* ===== 过渡动画 ===== */
    --loopes-transition: 0.25s ease;
    --loopes-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --loopes-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== 层级 ===== */
    --loopes-z-dropdown: 1000;
    --loopes-z-sticky: 1020;
    --loopes-z-fixed: 1030;
    --loopes-z-modal-backdrop: 1040;
    --loopes-z-modal: 1050;
    --loopes-z-popover: 1060;
    --loopes-z-tooltip: 1070;
    --loopes-z-toast: 99999;
    --loopes-z-loading: 100000;
    --loopes-z-lightbox: 100001;
}

/* ========================================
 * 暗色模式（Dark Mode）
 * 通过 [data-theme="dark"] 切换
 * ======================================== */
[data-theme="dark"] {
    /* ---- 品牌色（暗色加深） ---- */
    --loopes-primary: #60A5FA;
    --loopes-primary-hover: #93C5FD;
    --loopes-primary-active: #3B82F6;
    --loopes-primary-light: #1E3A5F;
    --loopes-primary-lighter: #1E293B;
    --loopes-primary-deeper: #93C5FD;
    --loopes-primary-gradient: linear-gradient(135deg, #60A5FA, #3B82F6);
    --loopes-primary-gradient-deeper: linear-gradient(135deg, #1A73E8, #0D47A1);

    /* ---- 辅助色 ---- */
    --loopes-amber: #FBBF24;
    --loopes-amber-hover: #F59E0B;
    --loopes-amber-light: #1C1917;
    --loopes-teal: #2DD4BF;
    --loopes-teal-hover: #14B8A6;
    --loopes-teal-light: #042F2E;
    --loopes-purple: #A78BFA;
    --loopes-purple-light: #1E1B4B;
    --loopes-pink: #F472B6;
    --loopes-pink-light: #1F0D1A;
    --loopes-cyan: #22D3EE;
    --loopes-cyan-light: #083344;

    /* ---- 语义色 ---- */
    --loopes-success: #34D399;
    --loopes-success-hover: #10B981;
    --loopes-success-active: #059669;
    --loopes-success-light: #064E3B;
    --loopes-success-border: #065F46;
    --loopes-success-text: #A7F3D0;
    --loopes-error: #F87171;
    --loopes-error-hover: #EF4444;
    --loopes-error-active: #DC2626;
    --loopes-error-light: #450A0A;
    --loopes-error-border: #7F1D1D;
    --loopes-error-text: #FECACA;
    --loopes-warning: #FBBF24;
    --loopes-warning-hover: #F59E0B;
    --loopes-warning-active: #D97706;
    --loopes-warning-light: #1C1917;
    --loopes-warning-border: #78350F;
    --loopes-warning-text: #FDE68A;
    --loopes-info: #60A5FA;
    --loopes-info-hover: #3B82F6;
    --loopes-info-active: #1A73E8;
    --loopes-info-light: #1E3A5F;
    --loopes-info-border: #1E3A5F;
    --loopes-info-text: #93C5FD;

    /* ---- 中性色 ---- */
    --loopes-text: #F1F5F9;
    --loopes-text-secondary: #94A3B8;
    --loopes-text-muted: #64748B;
    --loopes-text-placeholder: #475569;
    --loopes-text-inverse: #0F172A;
    --loopes-text-dark: #F1F5F9;
    --loopes-text-light: #94A3B8;

    /* ---- 背景色 ---- */
    --loopes-bg: #0F172A;
    --loopes-bg-secondary: #1E293B;
    --loopes-bg-tertiary: #334155;
    --loopes-bg-page: #0B1121;
    --loopes-bg-elevated: #1E293B;

    /* ---- 分隔/边框 ---- */
    --loopes-border: #334155;
    --loopes-border-light: #1E293B;
    --loopes-border-hover: #475569;

    /* ---- 阴影（暗色加深） ---- */
    --loopes-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --loopes-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    --loopes-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --loopes-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
    --loopes-shadow-color: rgba(96, 165, 250, 0.25);
    --loopes-shadow-color-strong: rgba(96, 165, 250, 0.35);

    /* ---- Modal 图标色重新映射 ---- */
    --loopes-modal-icon-success-bg: #064E3B;
    --loopes-modal-icon-success-fill: #34D399;
    --loopes-modal-icon-error-bg: #450A0A;
    --loopes-modal-icon-error-fill: #F87171;
    --loopes-modal-icon-warning-bg: #1C1917;
    --loopes-modal-icon-warning-fill: #FBBF24;
    --loopes-modal-icon-info-bg: #1E3A5F;
    --loopes-modal-icon-info-fill: #60A5FA;
}