/**
 * CentralAuth.STS.Identity Design Tokens
 * 基于 modern-login-preview.html 提取的设计规范
 *
 * @author Nepton Liu (neptonliu@hotmail.com)
 * @date 2025-09-29
 * @version 1.0.0
 *
 * 使用方法:
 * 1. 在项目中引入此CSS文件
 * 2. 使用 var(--variable-name) 引用变量
 *
 * 示例: background-color: var(--primary-color);
 */

:root {
  /* ========== 色彩系统 ========== */
  
  /* 主色调 */
  --primary-color: #4285f4;
  --primary-hover: #3367d6;
  --primary-light: rgba(66, 133, 244, 0.1);
  --primary-dark: #1a73e8;
  
  /* 功能色 */
  --success-color: #34a853;
  --success-light: rgba(52, 168, 83, 0.1);
  --error-color: #ea4335;
  --error-light: rgba(234, 67, 53, 0.1);
  --warning-color: #fbbc04;
  --warning-light: rgba(251, 188, 4, 0.1);
  --info-color: #4285f4;
  --info-light: rgba(66, 133, 244, 0.1);
  
  /* 文本颜色 */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-disabled: #cccccc;
  --text-inverse: #ffffff;
  
  /* 背景色 */
  --background-primary: #ffffff;
  --background-secondary: #f8f9fa;
  --background-tertiary: #f5f5f5;
  --background-disabled: #f0f0f0;
  --background-overlay: rgba(0, 0, 0, 0.3);
  
  /* 边框色 */
  --border-color: #e0e0e0;
  --border-hover: #cccccc;
  --border-focus: #4285f4;
  --border-error: #ea4335;
  --border-success: #34a853;
  
  /* 阴影色 */
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.2);
  --shadow-focus: 0 0 0 3px rgba(66, 133, 244, 0.1);
  --shadow-error: 0 0 0 3px rgba(234, 67, 53, 0.1);
  
  /* 社交媒体品牌色 */
  --google-color: #db4437;
  --github-color: #333333;
  --wechat-color: #07c160;
  --microsoft-color: #00a1f1;
  --twitter-color: #1da1f2;
  --facebook-color: #1877f2;
  --apple-color: #000000;
  
  /* ========== 字体系统 ========== */
  
  /* 字体族 */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* 字体大小 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  
  /* 字重 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  
  /* 字间距 */
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  
  /* ========== 间距系统 ========== */
  
  /* 基础间距 */
  --spacing-0: 0;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 10px;
  --spacing-6: 12px;
  --spacing-7: 14px;
  --spacing-8: 16px;
  --spacing-10: 20px;
  --spacing-12: 24px;
  --spacing-16: 32px;
  --spacing-20: 40px;
  --spacing-24: 48px;
  --spacing-32: 64px;
  
  /* 组件间距 */
  --form-group-spacing: var(--spacing-7);
  --section-spacing: var(--spacing-12);
  --page-spacing: var(--spacing-20);
  
  /* ========== 尺寸系统 ========== */
  
  /* 圆角 */
  --border-radius-sm: 4px;
  --border-radius-base: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;
  
  /* 边框宽度 */
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 4px;
  
  /* 组件高度 */
  --input-height: 44px;
  --input-height-base: 44px;  /* 与 --input-height 保持一致 */
  --button-height-sm: 32px;
  --button-height-base: 40px;
  --button-height-lg: 48px;
  
  /* 图标尺寸 */
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-base: 18px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  
  /* 头像尺寸 */
  --avatar-size-sm: 24px;
  --avatar-size-base: 32px;
  --avatar-size-lg: 40px;
  --avatar-size-xl: 48px;
  --avatar-size-2xl: 64px;
  
  /* 容器宽度 */
  --container-sm: 400px;
  --container-base: 450px;
  --container-lg: 600px;
  --container-xl: 800px;
  
  /* ========== 动画系统 ========== */
  
  /* 过渡时间 */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  
  /* 缓动函数 */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* 通用过渡 */
  --transition-all: all var(--transition-base) var(--ease-in-out);
  --transition-color: color var(--transition-base) var(--ease-in-out);
  --transition-transform: transform var(--transition-base) var(--ease-in-out);
  
  /* ========== Z-Index 层级 ========== */
  
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;
  --z-index-notification: 1000;
  
  /* ========== 断点系统 ========== */
  
  --breakpoint-xs: 360px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ========== 基础样式重置 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--background-secondary);
}

/* 链接样式 */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* 按钮基础样式 */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: var(--transition-all);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 输入框基础样式 */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  border: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--border-radius-base);
  transition: var(--transition-all);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}