/* ==============================================
    全局基本的CSS样式 (Global Styles)
   ============================================== */

:root {
    /* 
       Theme: Reading & Listening (Comfortable, Warm, Eye-friendly)
       配色方案：护眼、阅读、宁静
    */
    
    /* 核心色板 */
    --color-primary: #10ac84;       /* 主色调：宁静的青绿色，适合阅读氛围 */
    --color-primary-hover: #1dd1a1; /* 悬停色 */
    --color-secondary: #ff9f43;     /* 辅助色：温暖的橙色，用于强调 */
    
    /* 背景色 */
    --color-bg-body: #fdfcf8;       /* 页面背景：暖白/米色，类似纸张颜色 */
    --color-bg-card: #ffffff;       /* 卡片背景：纯白 */
    --color-bg-light: #f5f6fa;      /* 浅色背景块 */
    --color-bg-dark: #2d3436;       /* 深色背景块 */

    /* 文本颜色 */
    --color-text-main: #2d3436;     /* 主要文字：深灰，非纯黑，减少对比度刺眼 */
    --color-text-secondary: #636e72;/* 次要文字：中灰 */
    --color-text-light: #b2bec3;    /* 浅色文字 */
    --color-text-inverse: #ffffff;  /* 反色文字 */

    /* 边框与分割线 */
    --color-border: #dfe6e9;

    /* 字体 */
    --font-base: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --font-serif: "Merriweather", "Georgia", "Times New Roman", "Songti SC", "SimSun", serif; /* 衬线体，适合长文阅读 */

    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-base);
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary);
}

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}
