/**
 * FitMate - CSS Variables
 * 设计规范中定义的所有 CSS 自定义属性
 */

:root {
    /* ========================================
       Primary Colors - 主色板
       ======================================== */
    --primary: #3B82F6;
    --primary-dark: #2563EB;
    --primary-light: #EFF6FF;

    /* ========================================
       Status Colors - 状态色
       ======================================== */
    --success: #10B981;
    --success-light: #ECFDF5;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --danger: #EF4444;
    --danger-light: #FEE2E2;

    /* ========================================
       Background & Surface - 背景与表面
       ======================================== */
    --background: #F8FAFC;
    --surface: #FFFFFF;
    --surface-elevated: #FFFFFF;

    /* ========================================
       Border - 边框
       ======================================== */
    --border: #E2E8F0;
    --border-light: #F1F5F9;

    /* ========================================
       Text Colors - 文字颜色
       ======================================== */
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;

    /* ========================================
       Shadow Levels - 阴影层级
       ======================================== */
    --shadow-level1: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-level2: 0 4px 12px rgba(59, 130, 246, 0.08);
    --shadow-level3: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* ========================================
       Spacing - 间距系统（基于 8px）
       ======================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ========================================
       Border Radius - 圆角体系
       ======================================== */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ========================================
       Layout - 布局尺寸
       ======================================== */
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --header-height: 64px;

    /* ========================================
       Transitions - 过渡动画
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ========================================
       Typography - 字体
       ======================================== */
    --font-sans: 'Inter', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;

    /* ========================================
       Gradient - 渐变色（仅限强调场景）
       ======================================== */
    --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
}