/* ============================================
   读见太极 - 设计变量与基础样式 (variables.css)
   品牌配色：墨绿 #0E221E + 香槟金 #D6C39A
   全站颜色、字体、容器与组件尺度统一在本文件维护
   ============================================ */

/* ============================================
   读见太极 - 全站样式表
   品牌视觉：墨绿与金色
   ============================================ */

/* ========== CSS 变量 ========== */
:root {
    /* 主色 - 参考图深墨绿 */
    --color-primary: #0E221E;
    --color-primary-dark: #081815;
    --color-primary-light: #DBE5E0;
    --color-primary-bg: #EDF2EF;

    /* 辅色 - 香槟金；浅金用于深底，深金用于浅底文字。 */
    --color-accent: #D6C39A;
    --color-accent-dark: #7D6947;
    --color-accent-light: #F3EDDF;

    /* 中性色 */
    --color-text: #272C2A;
    --color-text-light: #5D6862;
    --color-text-muted: #68746B;
    --color-bg: #F4F4F4;
    --color-bg-alt: #F1F2EE;
    --color-bg-dark: #081815;
    --color-white: #FFFFFF;
    --color-border: #D7DDD5;
    --color-border-light: #E5E8E1;

    /* 共用表面与排版尺度 */
    --surface: #FFFFFF;
    --surface-warm: #F7F5EF;
    --surface-green: #0E221E;
    --border-gold: #DDD1B7;
    --reading-width: 780px;
    --heading-size: clamp(28px, 3vw, 38px);

    /* 功能色 */
    --color-success: #52C41A;
    --color-error: #FF4D4F;

    /* 字体 */
    /* 本地网页子集，源自思源宋体和思源黑体；授权与来源见 assets/fonts。 */
    --font-heading: "Dujian Song", "Source Han Serif SC", "思源宋体", "Songti SC", serif;
    --font-body: "Dujian Hei", "Source Han Sans SC", "思源黑体", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-en: var(--font-body);
    --font-serif: var(--font-heading);

    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-xxl: 64px;
    --spacing-xxxl: 100px;

    /* 圆角 */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(44, 44, 44, 0.06);
    --shadow-md: 0 4px 20px rgba(44, 44, 44, 0.08);
    --shadow-lg: 0 8px 40px rgba(44, 44, 44, 0.12);
    --shadow-hover: 0 12px 48px rgba(44, 44, 44, 0.16);

    /* 容器 */
    --container-max: 1180px;
    --container-padding: 28px;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========== 重置与基础 ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* 标题基础样式
   注意：这里不要写死 color。写死 --color-text（深灰）会覆盖掉深色区块
   （如 .hero-banner、.about-hero）里继承下来的白色，导致标题在深色背景上
   几乎看不见。用 inherit 让标题跟随所在区块的文字色：
     · 浅色区块：沿 body 的 --color-text，与以前表现一致
     · 深色区块：沿区块自己的白色，标题自然可见
   需要单独指定标题颜色的组件，自行写更具体的选择器即可。 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
}

/* ========== 容器 ========== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}