@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

@import 'base.css';
@import 'components.css';
@import 'animations.css';

:root {
    /* 默认蓝色主题 */
    --header-bg: rgba(15, 23, 42, 0.8);
    --header-scroll-bg: #1E40AF;
    --footer-bg: #1E40AF;
    --header-text: white;
    --footer-text: white;
    --nav-link-hover: #3B82F6;
    --accent-color: #3B82F6;
}

/* 诗歌页面主题 */
body.poetry-page {
    --header-bg: rgba(87, 83, 78, 0.8);
    --header-scroll-bg: #57534E;
    --footer-bg: #57534E;
    --header-text: white;
    --footer-text: white;
    --nav-link-hover: #0EA5E9;
    --accent-color: #ddbd5c;
}

/* 项目页面主题 */
body.projects-page {
    --header-bg: rgba(15, 23, 42, 0.8);
    --header-scroll-bg: #1E40AF;
    --footer-bg: #1E40AF;
    --header-text: white;
    --footer-text: white;
    --nav-link-hover: #3B82F6;
    --accent-color: #3B82F6;
}

/* 关于页面主题 */
body.about-page {
    --header-bg: rgba(15, 23, 42, 0.8);
    --header-scroll-bg: #1E40AF;
    --footer-bg: #1E40AF;
    --header-text: white;
    --footer-text: white;
    --nav-link-hover: #3B82F6;
    --accent-color: #3B82F6;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', sans-serif;
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
    }
}

@layer components {
    .font-serif {
        font-family: 'Playfair Display', serif;
    }
    
    /* 导航栏样式 */
    #header {
        background: transparent;
    }
    
    #header.glass-dark {
        background: var(--header-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    #header .nav-link {
        color: var(--header-text);
    }
    
    #header .nav-link:hover {
        color: var(--nav-link-hover);
    }
    
    #header .nav-link::after {
        background-color: var(--accent-color);
    }
    
    /* 页脚样式 */
    footer {
        background-color: var(--footer-bg);
        color: var(--footer-text);
    }
}