/* ==========================================
   Harvard Business School Style Design System
   哈佛商学院风格设计系统 - 碳核算教学专用
   ========================================== */

/* 1. Harvard Academic Color System */
:root {
    /* === Harvard Primary Colors === */
    --harvard-crimson: #A41E22;           /* 哈佛深红色 - 主要权威色 */
    --harvard-crimson-dark: #8B1A1D;      /* 深度红色 - 强调色 */
    --harvard-crimson-light: #C5464A;     /* 浅红色 - 辅助色 */
    
    /* === Academic Neutrals === */
    --academic-ivory: #F8F6F0;            /* 象牙白 - 主背景 */
    --academic-paper: #FEFCF7;            /* 纸张白 - 内容背景 */
    --academic-charcoal: #2D2D2D;         /* 学术炭灰 - 主文字 */
    --academic-slate: #5A5A5A;            /* 石板灰 - 次要文字 */
    --academic-silver: #8E8E8E;           /* 银灰色 - 说明文字 */
    --academic-light-gray: #E8E6E0;       /* 浅灰色 - 分割线 */
    
    /* === Carbon Professional Colors (保留环保特色) === */
    --carbon-forest: #0d4f3c;             /* 森林绿 - 专业色 */
    --carbon-sage: #6B8E7A;               /* 鼠尾草绿 - 辅助绿 */
    --carbon-mint: #E8F5E8;               /* 薄荷绿 - 背景绿 */
    
    /* === Academic Accent Colors === */
    --academic-gold: #C8A882;             /* 学术金 - 成就色 */
    --academic-navy: #1C2957;             /* 学术深蓝 - 严肃色 */
    --academic-burgundy: #7D2827;         /* 勃艮第红 - 重点色 */
    
    /* === Semantic Colors === */
    --success-academic: #2D5731;          /* 学术成功绿 */
    --warning-academic: #8B6914;          /* 学术警告金 */
    --error-academic: #8B1A1D;            /* 学术错误红 */
    --info-academic: #1C2957;             /* 学术信息蓝 */

    /* === Harvard Typography System === */
    /* 基于经典学术字体层次 */
    --font-family-serif: "Georgia", "Times New Roman", "Times", serif;
    --font-family-sans: "Helvetica Neue", "Arial", sans-serif;
    --font-family-mono: "Monaco", "Consolas", monospace;
    
    /* 字体大小 - 经典学术比例 */
    --font-size-hero: 4rem;              /* 64px - 主标题 */
    --font-size-display: 3rem;           /* 48px - 显示标题 */
    --font-size-h1: 2.5rem;              /* 40px - 一级标题 */
    --font-size-h2: 2rem;                /* 32px - 二级标题 */
    --font-size-h3: 1.5rem;              /* 24px - 三级标题 */
    --font-size-h4: 1.25rem;             /* 20px - 四级标题 */
    --font-size-h5: 1.125rem;            /* 18px - 五级标题 */
    --font-size-body: 1rem;              /* 16px - 正文 */
    --font-size-small: 0.875rem;         /* 14px - 小文字 */
    --font-size-caption: 0.75rem;        /* 12px - 说明文字 */
    
    /* 字重系统 */
    --font-weight-thin: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* 行高系统 - 学术阅读优化 */
    --line-height-tight: 1.25;           /* 紧密行高 */
    --line-height-normal: 1.5;           /* 标准行高 */
    --line-height-relaxed: 1.6;          /* 舒适行高 */
    --line-height-loose: 1.8;            /* 宽松行高 */

    /* === Harvard Spacing System === */
    /* 基于黄金比例 1.618 和 8px 网格 */
    --space-xs: 0.25rem;      /* 4px */
    --space-sm: 0.5rem;       /* 8px */
    --space-md: 0.75rem;      /* 12px */
    --space-lg: 1rem;         /* 16px */
    --space-xl: 1.5rem;       /* 24px */
    --space-2xl: 2rem;        /* 32px */
    --space-3xl: 3rem;        /* 48px */
    --space-4xl: 4rem;        /* 64px */
    --space-5xl: 6rem;        /* 96px */
    --space-6xl: 8rem;        /* 128px */
    
    /* 黄金比例间距 */
    --golden-xs: 0.618rem;    /* 约10px */
    --golden-sm: 1rem;        /* 16px */
    --golden-md: 1.618rem;    /* 约26px */
    --golden-lg: 2.618rem;    /* 约42px */
    --golden-xl: 4.236rem;    /* 约68px */

    /* === Border Radius System === */
    --radius-none: 0;
    --radius-sm: 0.125rem;    /* 2px */
    --radius-md: 0.25rem;     /* 4px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-full: 9999px;

    /* === Harvard Shadow System === */
    /* 学术深度阴影系统 */
    --shadow-paper: 0 1px 3px rgba(45, 45, 45, 0.1);
    --shadow-card: 0 2px 8px rgba(45, 45, 45, 0.12), 0 1px 4px rgba(45, 45, 45, 0.08);
    --shadow-elevated: 0 4px 16px rgba(45, 45, 45, 0.15), 0 2px 8px rgba(45, 45, 45, 0.1);
    --shadow-floating: 0 8px 32px rgba(45, 45, 45, 0.18), 0 4px 16px rgba(45, 45, 45, 0.12);
    --shadow-modal: 0 16px 64px rgba(45, 45, 45, 0.25), 0 8px 32px rgba(45, 45, 45, 0.15);
    
    /* 内阴影 */
    --shadow-inset: inset 0 1px 3px rgba(45, 45, 45, 0.1);
    --shadow-inset-deep: inset 0 2px 6px rgba(45, 45, 45, 0.15);

    /* === Academic Animation System === */
    --transition-swift: 0.2s ease-out;
    --transition-smooth: 0.3s ease-in-out;
    --transition-elegant: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-scholarly: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* === Z-Index Hierarchy === */
    --z-behind: -1;
    --z-base: 0;
    --z-content: 10;
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-overlay: 2000;
    --z-modal: 3000;
    --z-toast: 4000;
    --z-tooltip: 5000;

    /* === Layout System === */
    --container-xs: 480px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* 内容区域 */
    --content-width: 1200px;
    --sidebar-width: 320px;
    --header-height: 80px;
}

/* === 2. Harvard Base Styles === */
.harvard-academic {
    font-family: var(--font-family-serif);
    background-color: var(--academic-ivory);
    color: var(--academic-charcoal);
    line-height: var(--line-height-normal);
}

/* === 3. Harvard Typography Classes === */
.harvard-title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-bold);
    color: var(--harvard-crimson);
    line-height: var(--line-height-tight);
    margin-bottom: var(--golden-lg);
    letter-spacing: -0.02em;
}

.harvard-subtitle {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--academic-charcoal);
    line-height: var(--line-height-normal);
    margin-bottom: var(--golden-md);
}

.harvard-heading {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--harvard-crimson-dark);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-xl);
    border-bottom: 2px solid var(--academic-light-gray);
    padding-bottom: var(--space-sm);
}

.harvard-body {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    color: var(--academic-charcoal);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
}

.harvard-caption {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--academic-slate);
    line-height: var(--line-height-normal);
    font-style: italic;
}

/* === 4. Harvard Card System === */
.harvard-card {
    background: var(--academic-paper);
    border: 1px solid var(--academic-light-gray);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--golden-lg);
    margin-bottom: var(--golden-md);
    transition: var(--transition-smooth);
}

.harvard-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
}

.harvard-card-elevated {
    background: var(--academic-paper);
    border: 2px solid var(--harvard-crimson-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-floating);
    padding: var(--golden-xl);
    margin-bottom: var(--golden-lg);
}

.harvard-card-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--golden-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--academic-light-gray);
}

.harvard-card-title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--harvard-crimson);
    margin: 0;
}

.harvard-card-subtitle {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--academic-slate);
    margin-top: var(--space-xs);
}

/* === 5. Harvard Button System === */
.harvard-btn {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-md) var(--golden-md);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.harvard-btn-primary {
    background: var(--harvard-crimson);
    color: white;
    border-color: var(--harvard-crimson);
}

.harvard-btn-primary:hover {
    background: var(--harvard-crimson-dark);
    border-color: var(--harvard-crimson-dark);
    box-shadow: var(--shadow-elevated);
}

.harvard-btn-secondary {
    background: var(--academic-paper);
    color: var(--harvard-crimson);
    border-color: var(--harvard-crimson);
}

.harvard-btn-secondary:hover {
    background: var(--harvard-crimson);
    color: white;
    box-shadow: var(--shadow-card);
}

.harvard-btn-academic {
    background: var(--carbon-forest);
    color: white;
    border-color: var(--carbon-forest);
}

.harvard-btn-academic:hover {
    background: var(--academic-navy);
    border-color: var(--academic-navy);
    box-shadow: var(--shadow-elevated);
}

/* === 6. Harvard Layout Components === */
.harvard-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--golden-md);
}

.harvard-section {
    padding: var(--golden-xl) 0;
    margin-bottom: var(--golden-lg);
}

.harvard-grid {
    display: grid;
    gap: var(--golden-md);
}

.harvard-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.harvard-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.harvard-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* === 7. Harvard Slide System === */
.harvard-slide {
    background: var(--academic-paper);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
    padding: var(--golden-xl);
    margin-bottom: var(--golden-lg);
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

.harvard-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--harvard-crimson), var(--carbon-forest));
}

.harvard-slide-header {
    text-align: center;
    margin-bottom: var(--golden-xl);
    padding-bottom: var(--golden-md);
    border-bottom: 2px solid var(--academic-light-gray);
}

.harvard-slide-number {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    color: var(--academic-silver);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.harvard-slide-title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--harvard-crimson);
    line-height: var(--line-height-tight);
    margin: 0;
}

.harvard-slide-subtitle {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    color: var(--academic-slate);
    margin-top: var(--space-md);
    font-style: italic;
}

/* === 8. Harvard Data Visualization === */
.harvard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--golden-md);
    margin: var(--golden-lg) 0;
}

.harvard-stat-card {
    background: var(--academic-paper);
    border: 1px solid var(--academic-light-gray);
    border-radius: var(--radius-lg);
    padding: var(--golden-md);
    text-align: center;
    position: relative;
    transition: var(--transition-smooth);
}

.harvard-stat-card:hover {
    border-color: var(--harvard-crimson-light);
    box-shadow: var(--shadow-card);
}

.harvard-stat-number {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    color: var(--harvard-crimson);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.harvard-stat-label {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--academic-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.harvard-stat-description {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-caption);
    color: var(--academic-silver);
    margin-top: var(--space-xs);
    font-style: italic;
}

/* === 9. Harvard Process Steps === */
.harvard-process {
    margin: var(--golden-lg) 0;
}

.harvard-process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--golden-md);
    padding: var(--golden-md);
    background: var(--academic-paper);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--harvard-crimson);
    box-shadow: var(--shadow-paper);
    transition: var(--transition-smooth);
}

.harvard-process-step:hover {
    box-shadow: var(--shadow-card);
    transform: translateX(4px);
}

.harvard-process-number {
    background: var(--harvard-crimson);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    margin-right: var(--golden-md);
    flex-shrink: 0;
}

.harvard-process-content h4 {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--harvard-crimson-dark);
    margin: 0 0 var(--space-sm) 0;
}

.harvard-process-content p {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-body);
    color: var(--academic-charcoal);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* === 10. Responsive Design === */
@media (max-width: 1024px) {
    :root {
        --font-size-hero: 3rem;
        --font-size-display: 2.5rem;
        --font-size-h1: 2rem;
        --golden-xl: 3rem;
    }
    
    .harvard-grid-3,
    .harvard-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .harvard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-hero: 2.5rem;
        --font-size-display: 2rem;
        --font-size-h1: 1.75rem;
        --golden-xl: 2rem;
        --golden-lg: 1.5rem;
    }
    
    .harvard-grid-2,
    .harvard-grid-3,
    .harvard-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .harvard-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .harvard-slide {
        padding: var(--golden-md);
        min-height: auto;
    }
    
    .harvard-process-step {
        flex-direction: column;
        text-align: center;
    }
    
    .harvard-process-number {
        margin: 0 0 var(--space-lg) 0;
    }
}

@media (max-width: 480px) {
    .harvard-container {
        padding: 0 var(--space-lg);
    }
    
    .harvard-card,
    .harvard-card-elevated {
        padding: var(--space-xl);
    }
    
    .harvard-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--space-md);
    }
}

/* === 11. Harvard Academic Utilities === */
.text-harvard {
    color: var(--harvard-crimson) !important;
}

.text-carbon {
    color: var(--carbon-forest) !important;
}

.text-academic {
    color: var(--academic-charcoal) !important;
}

.bg-harvard {
    background-color: var(--harvard-crimson) !important;
}

.bg-academic {
    background-color: var(--academic-paper) !important;
}

.border-harvard {
    border-color: var(--harvard-crimson) !important;
}

.shadow-academic {
    box-shadow: var(--shadow-card) !important;
}

.shadow-elevated {
    box-shadow: var(--shadow-elevated) !important;
}

/* === 12. Print Styles for Academic Materials === */
@media print {
    .harvard-slide {
        box-shadow: none;
        border: 1px solid var(--academic-light-gray);
        margin-bottom: var(--space-xl);
        page-break-inside: avoid;
    }
    
    .harvard-btn {
        display: none;
    }
    
    .harvard-process-step:hover {
        transform: none;
    }
}