/* tokens.css - TocoMini 设计系统变量 */

/* ==================== CSS变量 - 设计系统 ==================== */
:root {
    /* 主色 - 专业监控蓝 */
    --primary-50: #eef4ff;
    --primary-100: #dbe7ff;
    --primary-200: #bfd2ff;
    --primary-300: #93b4ff;
    --primary-400: #5e89ff;
    --primary-500: #2f6fed;
    --primary-600: #1e58d6;
    --primary-700: #1c469f;
    --primary-800: #1d3b80;
    --primary-900: #1b335f;

    /* 状态色 */
    --success: #0f9f6e;
    --success-light: #d7f6ea;
    --success-dark: #0a6a49;
    --warning: #d97706;
    --warning-light: #fef0c7;
    --warning-dark: #995409;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --danger-dark: #991b1b;
    --info: #0ea5e9;
    --info-light: #dff5ff;
    --info-dark: #0b74a7;

    /* 辅助色 */
    --purple: #6d5efc;
    --purple-light: #ece9ff;
    --pink: #db2777;
    --pink-light: #fce7f3;
    --orange: #ea580c;
    --orange-light: #ffedd5;
    --teal: #0f8b8d;
    --teal-light: #d5f5f4;

    /* 中性色 - Light主题 */
    --gray-50: #fbfcfe;
    --gray-100: #f4f7fb;
    --gray-200: #e7edf5;
    --gray-300: #d7e0ea;
    --gray-400: #9aacbe;
    --gray-500: #6d7f92;
    --gray-600: #4e6175;
    --gray-700: #34485c;
    --gray-800: #1f3245;
    --gray-900: #122235;

    /* 背景色 - Light */
    --bg-primary: #fbfcfe;
    --bg-secondary: #f4f7fb;
    --bg-tertiary: #eaf0f7;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;

    /* 文字色 - Light */
    --text-primary: #122235;
    --text-secondary: #385066;
    --text-tertiary: #6b8094;
    --text-inverse: #ffffff;

    /* 边框色 - Light */
    --border-light: #dce4ee;
    --border-medium: #c8d3df;
    --border-strong: #9aabbd;

    /* 阴影 */
    --shadow-xs: 0 1px 2px rgba(18, 34, 53, 0.05);
    --shadow-sm: 0 8px 18px rgba(18, 34, 53, 0.06);
    --shadow-md: 0 14px 32px rgba(18, 34, 53, 0.1);
    --shadow-lg: 0 22px 48px rgba(18, 34, 53, 0.12);
    --shadow-xl: 0 30px 70px rgba(18, 34, 53, 0.16);
    --shadow-glow-cyan: 0 0 24px rgba(14, 165, 233, 0.22);
    --shadow-glow-danger: 0 0 24px rgba(220, 38, 38, 0.22);
    --shadow-glow-success: 0 0 24px rgba(15, 159, 110, 0.22);

    /* 尺寸 */
    --nav-height-mobile: 64px;
    --nav-height-desktop: 72px;
    --sidebar-width: 260px;
    --max-content-width: 1400px;

    /* 间距 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* 字体 */
    --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

    /* 过渡 */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-Index 层级 */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-tooltip: 3000;

    /* 告警级别语义色 */
    --alarm-5-bg: rgba(220, 38, 38, 0.15);
    --alarm-5-text: #dc2626;
    --alarm-4-bg: rgba(249, 115, 22, 0.15);
    --alarm-4-text: #ea580c;
    --alarm-3-bg: rgba(245, 158, 11, 0.15);
    --alarm-3-text: #d97706;
    --alarm-2-bg: rgba(59, 130, 246, 0.15);
    --alarm-2-text: #2563eb;
    --alarm-1-bg: rgba(107, 114, 128, 0.15);
    --alarm-1-text: #6b7280;
    --alarm-0-bg: rgba(156, 163, 175, 0.1);
    --alarm-0-text: #9ca3af;

    /* 反馈块语义变量 */
    --feedback-padding: 10px 14px;
    --feedback-radius: 14px;
    --feedback-font-size: 13px;
    --feedback-line-height: 1.6;
    --feedback-border: 1px solid rgba(100, 116, 139, 0.14);
    --feedback-bg: rgba(248, 250, 252, 0.92);
    --feedback-color: var(--hp-text-soft);
    --feedback-error-border: rgba(239, 68, 68, 0.3);
    --feedback-error-bg: rgba(254, 242, 242, 0.96);
    --feedback-error-color: #b91c1c;
    --feedback-success-border: rgba(16, 185, 129, 0.26);
    --feedback-success-bg: rgba(236, 253, 245, 0.96);
    --feedback-success-color: #047857;

    /* 页面共享语义变量（hp = homepage 原变量，现已被多页面共用） */
    --hp-surface: rgba(255, 255, 255, 0.82);
    --hp-surface-strong: rgba(255, 255, 255, 0.94);
    --hp-surface-muted: #edf3fa;
    --hp-surface-emphasis: #e4ecf6;
    --hp-border: rgba(52, 72, 92, 0.12);
    --hp-border-strong: rgba(52, 72, 92, 0.2);
    --hp-text-strong: #102033;
    --hp-text-base: #395168;
    --hp-text-soft: #6d8196;
    --hp-link: var(--primary-600);
    --hp-link-hover: var(--primary-700);
    --hp-shadow-sm: 0 14px 32px rgba(18, 34, 53, 0.08);
    --hp-shadow-lg: 0 24px 56px rgba(18, 34, 53, 0.14);
}

/* Dark主题 */
[data-theme="dark"] {
    /* 中性色 - Dark */
    --gray-50: #08111d;
    --gray-100: #0d1724;
    --gray-200: #162231;
    --gray-300: #223144;
    --gray-400: #49627d;
    --gray-500: #7f91a7;
    --gray-600: #b8c6d7;
    --gray-700: #d6deea;
    --gray-800: #eef3f9;
    --gray-900: #f8fbff;

    /* 背景色 - Dark */
    --bg-primary: #08111d;
    --bg-secondary: #0d1724;
    --bg-tertiary: #162231;
    --bg-elevated: #142131;
    --bg-card: #112030;

    /* 文字色 - Dark */
    --text-primary: #edf3fb;
    --text-secondary: #c6d2e1;
    --text-tertiary: #8798ad;
    --text-inverse: #0f172a;

    /* 边框色 - Dark */
    --border-light: #1c2a3b;
    --border-medium: #24384d;
    --border-strong: #415872;

    /* 阴影 - Dark */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 18px 38px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 26px 56px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 36px 84px rgba(0, 0, 0, 0.48);
    --shadow-glow-cyan: 0 0 30px rgba(14, 165, 233, 0.32);
    --shadow-glow-danger: 0 0 30px rgba(220, 38, 38, 0.3);
    --shadow-glow-success: 0 0 30px rgba(15, 159, 110, 0.32);

    /* 告警级别语义色 - Dark */
    --alarm-5-bg: rgba(220, 38, 38, 0.2);
    --alarm-5-text: #fca5a5;
    --alarm-4-bg: rgba(249, 115, 22, 0.18);
    --alarm-4-text: #fb923c;
    --alarm-3-bg: rgba(245, 158, 11, 0.18);
    --alarm-3-text: #fbbf24;
    --alarm-2-bg: rgba(59, 130, 246, 0.18);
    --alarm-2-text: #93c5fd;
    --alarm-1-bg: rgba(107, 114, 128, 0.14);
    --alarm-1-text: #94a3b8;
    --alarm-0-bg: rgba(156, 163, 175, 0.08);
    --alarm-0-text: #6b7280;

    /* 反馈块语义变量 - Dark */
    --feedback-border: 1px solid rgba(148, 163, 184, 0.16);
    --feedback-bg: rgba(15, 23, 42, 0.8);
    --feedback-color: #e2e8f0;
    --feedback-error-border: rgba(239, 68, 68, 0.3);
    --feedback-error-bg: rgba(69, 10, 10, 0.96);
    --feedback-error-color: #fecaca;
    --feedback-success-border: rgba(16, 185, 129, 0.26);
    --feedback-success-bg: rgba(6, 78, 59, 0.96);
    --feedback-success-color: #a7f3d0;

    /* 页面共享语义变量 - Dark */
    --hp-surface: rgba(17, 32, 48, 0.84);
    --hp-surface-strong: rgba(20, 36, 52, 0.94);
    --hp-surface-muted: rgba(24, 40, 58, 0.9);
    --hp-surface-emphasis: rgba(31, 48, 69, 0.94);
    --hp-border: rgba(135, 152, 173, 0.14);
    --hp-border-strong: rgba(135, 152, 173, 0.26);
    --hp-text-strong: #eef4fb;
    --hp-text-base: #c7d3e2;
    --hp-text-soft: #92a4ba;
    --hp-link: var(--primary-400);
    --hp-link-hover: var(--primary-300);
    --hp-shadow-sm: 0 16px 34px rgba(0, 0, 0, 0.28);
    --hp-shadow-lg: 0 26px 58px rgba(0, 0, 0, 0.42);
}