/**
 * 懒人生态系统 - CSS变量体系
 * 统一设计令牌，支撑全站重建
 * 
 * @version 1.0.0
 * @update 2024-01-01
 */

/* ================================
   1. 颜色系统
   ================================ */

:root {
    /* ---------- 主色系 ---------- */
    /* 温暖橙 - 主品牌色，传递活力与亲和力 */
    --color-primary: #FF7A00;
    --color-primary-hover: #E66A00;
    --color-primary-active: #CC5D00;
    --color-primary-light: #FFF4E6;
    --color-primary-dark: #B35900;
    
    /* 专业蓝 - 辅助色，传递信任与专业 */
    --color-secondary: #2563EB;
    --color-secondary-hover: #1D4ED8;
    --color-secondary-active: #1E40AF;
    --color-secondary-light: #EFF6FF;
    --color-secondary-dark: #1E3A8A;
    
    /* ---------- 状态色 ---------- */
    /* 成功 - 操作成功 */
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-success-active: #047857;
    --color-success-light: #ECFDF5;
    --color-success-dark: #065F46;
    
    /* 警告 - 需要注意 */
    --color-warning: #F59E0B;
    --color-warning-hover: #D97706;
    --color-warning-active: #B45309;
    --color-warning-light: #FFFBEB;
    --color-warning-dark: #92400E;
    
    /* 错误 - 操作失败/危险 */
    --color-error: #EF4444;
    --color-error-hover: #DC2626;
    --color-error-active: #B91C1C;
    --color-error-light: #FEF2F2;
    --color-error-dark: #991B1B;
    
    /* 信息 - 提示/帮助 */
    --color-info: #3B82F6;
    --color-info-hover: #2563EB;
    --color-info-active: #1D4ED8;
    --color-info-light: #EFF6FF;
    --color-info-dark: #1E3A8A;
    
    /* ---------- 中性色 - 文字 ---------- */
    --color-text-primary: #1F2937;    /* 主要文字 - 深灰 */
    --color-text-secondary: #4B5563; /* 次要文字 */
    --color-text-tertiary: #9CA3AF;   /* 辅助文字 */
    --color-text-disabled: #D1D5DB;  /* 禁用文字 */
    --color-text-inverse: #FFFFFF;   /* 反色文字 */
    
    /* ---------- 中性色 - 背景 ---------- */
    --color-bg-primary: #FFFFFF;     /* 主背景 */
    --color-bg-secondary: #F9FAFB;   /* 次背景 */
    --color-bg-tertiary: #F3F4F6;    /* 卡片/区块背景 */
    --color-bg-elevated: #FFFFFF;    /* 浮层背景 */
    --color-bg-overlay: rgba(0, 0, 0, 0.5);  /* 遮罩背景 */
    --color-bg-mask: rgba(0, 0, 0, 0.6);     /* 全屏遮罩 */
    
    /* ---------- 中性色 - 边框 ---------- */
    --color-border-default: #E5E7EB; /* 默认边框 */
    --color-border-light: #F3F4F6;   /* 浅边框 */
    --color-border-strong: #D1D5DB; /* 深边框 */
    --color-border-focus: #FF7A00;  /* 聚焦边框 */
    
    /* ---------- 语义色 ---------- */
    --color-link: #2563EB;          /* 链接色 */
    --color-link-hover: #1D4ED8;    /* 链接悬停 */
    --color-muted: #6B7280;         /* 弱化色 */


    /* ================================
       2. 字体系统
       ================================ */
    
    /* 字体族 - 按优先级排列 */
    --font-family-sans: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    --font-family-numbers: 'DIN Alternate', 'Roboto', 'Helvetica Neue', sans-serif;
    
    /* 字号阶梯 */
    --font-size-xs: 12px;      /* 超小 - 辅助说明 */
    --font-size-sm: 14px;      /* 小 - 次要内容 */
    --font-size-base: 16px;    /* 基准 - 正文 */
    --font-size-lg: 18px;      /* 大 - 强调 */
    --font-size-xl: 20px;      /* 特大 - 标题 */
    --font-size-2xl: 24px;     /* 2倍大 */
    --font-size-3xl: 30px;     /* 3倍大 */
    --font-size-4xl: 36px;     /* 4倍大 */
    --font-size-5xl: 48px;     /* 5倍大 - Hero */
    
    /* 行高 */
    --line-height-none: 1;           /* 无 */
    --line-height-tight: 1.25;      /* 紧凑 */
    --line-height-snug: 1.375;       /* 略紧 */
    --line-height-normal: 1.5;        /* 正常 */
    --line-height-relaxed: 1.625;     /* 宽松 */
    --line-height-loose: 2;          /* 极宽松 */
    
    /* 字重 */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* 字间距 */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;


    /* ================================
       3. 间距系统
       ================================ */
    
    /* 基准单位: 4px */
    --spacing-0: 0px;
    --spacing-1: 4px;       /* 1单位 */
    --spacing-2: 8px;       /* 2单位 */
    --spacing-3: 12px;      /* 3单位 */
    --spacing-4: 16px;      /* 4单位 */
    --spacing-5: 20px;      /* 5单位 */
    --spacing-6: 24px;      /* 6单位 */
    --spacing-8: 32px;      /* 8单位 */
    --spacing-10: 40px;     /* 10单位 */
    --spacing-12: 48px;     /* 12单位 */
    --spacing-16: 64px;     /* 16单位 */
    --spacing-20: 80px;     /* 20单位 */
    --spacing-24: 96px;     /* 24单位 */
    --spacing-32: 128px;    /* 32单位 */
    
    /* 常用组合 */
    --spacing-section: 48px;   /* 区块间距 */
    --spacing-card: 16px;     /* 卡片内边距 */
    --spacing-gap: 24px;      /* 网格间隙 */


    /* ================================
       4. 圆角系统
       ================================ */
    
    --radius-none: 0;
    --radius-sm: 4px;         /* 小圆角 - 按钮/输入框 */
    --radius-md: 8px;         /* 中圆角 - 卡片 */
    --radius-lg: 12px;        /* 大圆角 - 模态框 */
    --radius-xl: 16px;        /* 特大圆角 */
    --radius-2xl: 24px;       /* 超大圆角 */
    --radius-full: 9999px;    /* 全圆角 - 圆形/药丸形 */


    /* ================================
       5. 阴影系统
       ================================ */
    
    /* 基础阴影 - 按深度递增 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* 功能阴影 */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);        /* 卡片默认 */
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12); /* 卡片悬停 */
    --shadow-primary: 0 4px 14px rgba(255, 122, 0, 0.35); /* 主色阴影 */
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);      /* 模态框 */
    --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.15);    /* 下拉菜单 */


    /* ================================
       6. 动画系统
       ================================ */
    
    /* 动画时长 */
    --duration-instant: 50ms;    /* 瞬间 - 状态切换 */
    --duration-fast: 150ms;      /* 快速 - 微交互 */
    --duration-normal: 250ms;    /* 正常 - 标准过渡 */
    --duration-slow: 350ms;      /* 慢速 - 大型动画 */
    --duration-slower: 500ms;    /* 更慢 */
    
    /* 缓动函数 */
    --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);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* 组合动画变量 */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);


    /* ================================
       7. 层级系统 (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-toast: 1080;         /* Toast通知 */
    --z-toast-container: 1090; /* Toast容器 */
    
    /* 页面层级 */
    --z-base: 0;
    --z-above: 10;


    /* ================================
       8. 布局系统
       ================================ */
    
    /* 容器宽度 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-full: 100%;
    
    /* 响应式断点 (参考) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* 栅格 */
    --grid-columns: 12;
    --grid-gutter: 24px;
    
    /* 导航高度 */
    --navbar-height: 60px;
    --navbar-height-mobile: 56px;


    /* ================================
       9. 杂项
       ================================ */
    
    /* 边框宽度 */
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    
    /* 轮廓 */
    --outline-width: 2px;
    --outline-offset: 2px;
    
    /* 最小宽度 */
    --min-width-button: 88px;
    
    /* 最大宽度 */
    --max-width-prose: 65ch;
    
    /* 图标尺寸 */
    --icon-size-xs: 12px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl: 32px;
}

/* ================================
   深色模式变量 (可选)
   ================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* 可以在这里覆盖深色模式的颜色变量 */
        /* 示例:
        --color-bg-primary: #1a1a1a;
        --color-text-primary: #ffffff;
        */
    }
}