/* manager-typography.css - 后台管理统一字体规范 */

/* ============================================
   统一字号系统（基于 16px = 1rem）
   ============================================ */

:root {
    /* 主字号 */
    --font-base: 1rem;           /* 16px - 正文 */
    --font-sm: 0.875rem;         /* 14px - 次要文字 */
    --font-xs: 0.75rem;          /* 12px - 标签、徽章 */
    
    /* 标题字号 */
    --font-h1: 1.75rem;          /* 28px - 页面大标题 */
    --font-h2: 1.5rem;           /* 24px - 页面标题 */
    --font-h3: 1.25rem;          /* 20px - 卡片标题 */
    --font-h4: 1.125rem;         /* 18px - 子标题 */
    
    /* 表格字号 */
    --font-table-header: 0.875rem;  /* 14px - 表头 */
    --font-table-cell: 0.875rem;    /* 14px - 单元格 */
    
    /* 表单字号 */
    --font-label: 0.875rem;         /* 14px - 标签 */
    --font-input: 0.875rem;         /* 14px - 输入框 */
    --font-help: 0.75rem;           /* 12px - 提示文字 */
    
    /* 统计卡片字号 */
    --font-stat-label: 0.875rem;    /* 14px - 统计项标签 */
    --font-stat-value: 1.75rem;     /* 28px - 统计数值 */
    
    /* 颜色规范 */
    --text-primary: #333333;        /* 主文字 */
    --text-secondary: #888888;      /* 次要文字 */
    --text-muted: #999999;          /* 弱化文字 */
}

/* ============================================
   基础排版
   ============================================ */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-size: var(--font-base);
    line-height: 1.5;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   标题样式
   ============================================ */

.page-title {
    font-size: var(--font-h2);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.page-subtitle {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: 0;
    line-height: 1.5;
}

.card-title, .modal-title {
    font-size: var(--font-h3);
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   表格排版
   ============================================ */

.table thead th {
    font-size: var(--font-table-header);
    font-weight: 600;
    color: var(--text-primary);
}

.table tbody td {
    font-size: var(--font-table-cell);
    color: var(--text-primary);
}

/* ============================================
   表单排版
   ============================================ */

.form-label {
    font-size: var(--font-label);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    font-size: var(--font-input);
}

.form-text, small {
    font-size: var(--font-help);
    color: var(--text-muted);
}

/* ============================================
   统计卡片排版
   ============================================ */

.stat-label {
    font-size: var(--font-stat-label);
    color: var(--text-secondary);
}

.stat-value {
    font-size: var(--font-stat-value);
    font-weight: 700;
    color: var(--text-primary);
}

/* ============================================
   徽章和标签
   ============================================ */

.badge, .role-badge, .plan-badge, .status-badge {
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.25em 0.6em;
}

/* ============================================
   按钮排版
   ============================================ */

.btn {
    font-size: var(--font-sm);
    font-weight: 500;
}

.btn-sm {
    font-size: 0.8125rem;  /* 13px */
}

.btn-lg {
    font-size: 1rem;       /* 16px */
}

/* ============================================
   导航和菜单
   ============================================ */

.nav-item, .nav-link {
    font-size: var(--font-sm);
}

.sidebar .nav-item {
    font-size: var(--font-sm);
}

/* ============================================
   工具提示和辅助文字
   ============================================ */

.text-muted, .text-secondary {
    color: var(--text-secondary) !important;
}

.text-small {
    font-size: var(--font-sm);
}

.text-xs {
    font-size: var(--font-xs);
}

/* ============================================
   代码和等宽字体
   ============================================ */

code, .code-text, .order-no {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--font-xs);
}

/* ============================================
   响应式调整
   ============================================ */

@media (max-width: 768px) {
    :root {
        --font-h1: 1.5rem;     /* 24px */
        --font-h2: 1.25rem;    /* 20px */
        --font-stat-value: 1.5rem;  /* 24px */
    }
    
    .page-title {
        font-size: var(--font-h2);
    }
    
    .stat-value {
        font-size: var(--font-stat-value);
    }
}