/* RokMail - CSS 变量系统
 * 参考 Anthropic 设计风格
 * 字体：标题使用 serif 字体栈，正文使用 sans-serif
 */

:root {
    /* ===== 字体系统 ===== */
    /* 标题字体 - 参考 Anthropic 的 Tiempos/serif 风格 */
    --font-heading: 'Georgia', 'Cambria', 'Times New Roman', 'Times', ui-serif, serif;
    
    /* 正文字体 - 参考 Claude 聊天界面的 serif 字体栈 */
    --font-body: ui-serif, 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
    
    /* 系统 UI 字体 - 用于按钮、标签等 */
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    
    /* 等宽字体 - 用于代码、验证码 */
    --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;

    /* ===== 字体大小 ===== */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */

    /* ===== 字重 ===== */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ===== 行高 ===== */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* ===== 字间距 ===== */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;

    /* ===== 颜色系统 - 柔和自然的配色 ===== */
    
    /* 主色调 - 温暖的棕褐色系 */
    --color-primary-50: #faf8f5;
    --color-primary-100: #f5f0e8;
    --color-primary-200: #e8dfd0;
    --color-primary-300: #d4c4a8;
    --color-primary-400: #bfa67e;
    --color-primary-500: #a68a5b;
    --color-primary-600: #8b7049;
    --color-primary-700: #6f5a3a;
    --color-primary-800: #5a4830;
    --color-primary-900: #4a3c28;

    /* 强调色 - 柔和的蓝绿色 */
    --color-accent-50: #f0f9f7;
    --color-accent-100: #d9f0eb;
    --color-accent-200: #b5e1d8;
    --color-accent-300: #88ccc0;
    --color-accent-400: #5bb3a6;
    --color-accent-500: #3d9a8c;
    --color-accent-600: #2f7b70;
    --color-accent-700: #28635b;
    --color-accent-800: #234f4a;
    --color-accent-900: #1f423e;

    /* 中性色 - 温暖的灰色 */
    --color-neutral-50: #fafaf9;
    --color-neutral-100: #f5f5f4;
    --color-neutral-200: #e7e5e4;
    --color-neutral-300: #d6d3d1;
    --color-neutral-400: #a8a29e;
    --color-neutral-500: #78716c;
    --color-neutral-600: #57534e;
    --color-neutral-700: #44403c;
    --color-neutral-800: #292524;
    --color-neutral-900: #1c1917;

    /* 语义色 */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;

    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;

    --color-error-50: #fef2f2;
    --color-error-100: #fee2e2;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;

    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;

    /* ===== 应用颜色 ===== */
    
    /* 背景色 */
    --bg-primary: #faf8f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f0e8;
    --bg-hover: #f0ebe0;
    --bg-selected: #e8dfd0;
    --bg-muted: #f5f5f4;

    /* 文字色 */
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #78716c;
    --text-placeholder: #a8a29e;
    --text-inverse: #fafaf9;

    /* 边框色 */
    --border-default: #e7e5e4;
    --border-light: #f5f5f4;
    --border-dark: #d6d3d1;
    --border-focus: var(--color-accent-500);

    /* 阴影 */
    --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
    --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07), 0 2px 4px rgba(28, 25, 23, 0.04);
    --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.08), 0 4px 6px rgba(28, 25, 23, 0.04);
    --shadow-xl: 0 20px 25px rgba(28, 25, 23, 0.10), 0 8px 10px rgba(28, 25, 23, 0.04);

    /* ===== 间距系统 ===== */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* ===== 圆角 ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-full: 9999px;

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

    /* ===== 布局 ===== */
    --navbar-height: 64px;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --email-list-width: 360px;

    /* ===== Z-index ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
}

/* ===== 深色模式变量 ===== */
[data-theme="dark"] {
    /* 背景色 */
    --bg-primary: #1c1917;
    --bg-secondary: #292524;
    --bg-tertiary: #44403c;
    --bg-hover: #57534e;
    --bg-selected: #78716c;
    --bg-muted: #292524;

    /* 文字色 */
    --text-primary: #fafaf9;
    --text-secondary: #d6d3d1;
    --text-muted: #a8a29e;
    --text-placeholder: #78716c;
    --text-inverse: #1c1917;

    /* 边框色 */
    --border-default: #44403c;
    --border-light: #57534e;
    --border-dark: #292524;

    /* 阴影 - 深色模式下更柔和 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.2);

    /* 强调色调整 */
    --color-accent-500: #5bb3a6;
    --color-accent-600: #88ccc0;
}

/* ===== 兼容性变量别名 ===== */
/* 用于支持旧版样式文件中的变量名 */
:root {
    /* 主色调别名 */
    --primary: var(--color-primary-500);
    --primary-dark: var(--color-primary-600);
    --primary-light: var(--color-primary-400);
    
    /* 语义色别名 */
    --success: var(--color-success-500);
    --warning: var(--color-warning-500);
    --error: var(--color-error-500);
    --info: var(--color-info-500);
    
    /* 边框色别名 */
    --border-color: var(--border-default);
    
    /* 间距别名 */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-10);
    --space-3xl: var(--space-12);
    
    /* VIP 颜色 */
    --text-vip: #c71585;
}