/**
 * ============================================
 * 设计令牌系统 (Design Tokens)
 * ============================================
 *
 * 这是安全管理模块的设计系统
 * 基于 special-education 标杆项目定义
 *
 * @author IDE 4
 * @version 1.0.0
 * @date 2026-03-18
 */

:root {
  /* ==================== 颜色系统 ==================== */

  /* 主色调 - 科技蓝 */
  --color-primary: #00d4ff;
  --color-primary-light: #4de4ff;
  --color-primary-dark: #00a8cc;
  --color-primary-rgb: 0, 212, 255;

  /* 辅助色 - 紫色 */
  --color-secondary: #7b2ff7;
  --color-secondary-light: #9d5aff;
  --color-secondary-dark: #5a1fc4;
  --color-secondary-rgb: 123, 47, 247;

  /* 强调色 - 粉色 */
  --color-accent: #ff6b9d;
  --color-accent-light: #ff8eb3;
  --color-accent-dark: #e64987;
  --color-accent-rgb: 255, 107, 157;

  /* 成功 - 绿色 */
  --color-success: #00ff88;
  --color-success-light: #4dffaa;
  --color-success-dark: #00cc6a;
  --color-success-rgb: 0, 255, 136;

  /* 警告 - 橙色 */
  --color-warning: #ffab00;
  --color-warning-light: #ffc04d;
  --color-warning-dark: #cc8800;
  --color-warning-rgb: 255, 171, 0;

  /* 错误 - 红色 */
  --color-error: #ff3d71;
  --color-error-light: #ff6b93;
  --color-error-dark: #e6154a;
  --color-error-rgb: 255, 61, 113;

  /* 信息 - 蓝色 */
  --color-info: #0095ff;
  --color-info-light: #4db8ff;
  --color-info-dark: #0077cc;
  --color-info-rgb: 0, 149, 255;

  /* ==================== 渐变系统 ==================== */

  /* 主渐变 - 蓝紫渐变 */
  --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4de4ff 0%, #9d5aff 100%);

  /* 科技渐变 */
  --gradient-tech: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);

  /* 成功渐变 */
  --gradient-success: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);

  /* 警告渐变 */
  --gradient-warning: linear-gradient(135deg, #ffab00 0%, #ff6b9d 100%);

  /* 错误渐变 */
  --gradient-error: linear-gradient(135deg, #ff3d71 0%, #ff6b9d 100%);

  /* 高级渐变 - 多色彩虹 */
  --gradient-rainbow: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 33%, #ff6b9d 66%, #ffab00 100%);

  /* 夜空渐变 */
  --gradient-night: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%);

  /* ==================== 背景系统 ==================== */

  /* 主背景 - 深蓝黑 */
  --bg-primary: #0a0e27;
  --bg-primary-rgb: 10, 14, 39;

  /* 次背景 - 深蓝 */
  --bg-secondary: #1a1f3a;
  --bg-secondary-rgb: 26, 31, 58;

  /* 三级背景 */
  --bg-tertiary: #252b4d;
  --bg-tertiary-rgb: 37, 43, 77;

  /* 卡片背景 - 半透明 */
  --bg-card: rgba(26, 31, 58, 0.6);
  --bg-card-hover: rgba(26, 31, 58, 0.8);

  /* 玻璃态背景 */
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-glass-light: rgba(255, 255, 255, 0.08);
  --bg-glass-dark: rgba(0, 0, 0, 0.3);

  /* 输入框背景 */
  --bg-input: rgba(255, 255, 255, 0.08);
  --bg-input-focus: rgba(255, 255, 255, 0.12);

  /* 遮罩背景 */
  --bg-overlay: rgba(10, 14, 39, 0.95);
  --bg-overlay-light: rgba(10, 14, 39, 0.7);

  /* ==================== 文字系统 ==================== */

  /* 主要文字 */
  --text-primary: #ffffff;
  --text-primary-rgb: 255, 255, 255;

  /* 次要文字 */
  --text-secondary: #b4b9d1;
  --text-secondary-rgb: 180, 185, 209;

  /* 三级文字 */
  --text-tertiary: #6b7199;
  --text-tertiary-rgb: 107, 113, 153;

  /* 禁用文字 */
  --text-disabled: #3f4566;
  --text-disabled-rgb: 63, 69, 102;

  /* 反色文字(用于深色背景) */
  --text-inverse: #0a0e27;

  /* ==================== 边框系统 ==================== */

  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-light: rgba(255, 255, 255, 0.15);
  --border-color-dark: rgba(255, 255, 255, 0.05);
  --border-color-focus: var(--color-primary);

  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 3px;

  /* ==================== 间距系统 ==================== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ==================== 圆角系统 ==================== */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ==================== 阴影系统 ==================== */

  /* 普通阴影 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);

  /* 发光阴影 */
  --shadow-glow-primary: 0 0 20px rgba(0, 212, 255, 0.3);
  --shadow-glow-primary-lg: 0 0 40px rgba(0, 212, 255, 0.5);
  --shadow-glow-secondary: 0 0 20px rgba(123, 47, 247, 0.3);
  --shadow-glow-success: 0 0 20px rgba(0, 255, 136, 0.3);
  --shadow-glow-error: 0 0 20px rgba(255, 61, 113, 0.3);

  /* 内阴影 */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* ==================== 字体系统 ==================== */

  /* 字体家族 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                       'Microsoft YaHei', sans-serif;
  --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;

  /* 字重 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ==================== 过渡动画系统 ==================== */

  /* 持续时间 */
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.75s;

  /* 缓动函数 */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* 组合过渡 */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ==================== Z-index系统 ==================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;

  /* ==================== 尺寸系统 ==================== */

  /* 容器宽度 */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* 组件高度 */
  --height-input: 48px;
  --height-button: 48px;
  --height-navbar: 64px;
  --height-footer: 80px;

  /* ==================== 特效系统 ==================== */

  /* 模糊效果 */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;

  /* 透明度 */
  --opacity-disabled: 0.4;
  --opacity-hover: 0.8;
  --opacity-pressed: 0.6;
  --color-danger: var(--color-error, #ff3d71);


/* ==================== 深色主题(默认) ==================== */
[data-theme="dark"] {
  /* 已在:root中定义,这里保持不变 */
}

/* ==================== 浅色主题(备选) ==================== */
[data-theme="light"] {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8ecf1;

  --text-primary: #1a1f3a;
  --text-secondary: #6b7199;
  --text-tertiary: #b4b9d1;

  --border-color: rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ==================== 打印样式优化 ==================== */
@media print {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
  }
}