/* ============================================
   博客基础样式系统 
============================================ */

/* ---------- CSS 变量定义 ---------- */
:root {
    /* 🎨 颜色系统 - 优化对比度 */
    --color-bg: #ffffff;
    --color-bg-secondary: #fafbfc;
    --color-bg-elevated: #f6f8fa;
    
    --color-text-primary: #0d1117;
    --color-text-secondary: #57606a;
    --color-text-tertiary: #8b949e;
    
    --color-border-light: #d8dee4;
    --color-border-default: #d0d7de;
    --color-border-strong: #8c959f;
    
    --color-accent: #0969da;
    --color-accent-hover: #0550ae;
    --color-accent-subtle: #ddf4ff;
    
    --color-success: #1f883d;
    --color-danger: #d1242f;
    --color-warning: #bf8700;
    
    /* 📝 字体系统 - 现代化字体栈 */
    --font-sans: 
        'Inter', 
        'SF Pro Display',
        -apple-system, 
        BlinkMacSystemFont,
        'PingFang SC',
        'Microsoft YaHei',
        system-ui,
        sans-serif;
    
    --font-serif: 
        'Noto Serif SC',
        'Source Serif Pro',
        'Georgia',
        'Songti SC',
        serif;
    
    --font-mono: 
        'JetBrains Mono',
        'Fira Code',
        'Cascadia Code',
        'Consolas',
        monospace;
    
    /* 📏 字体大小 - 流畅缩放 */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);
    --text-4xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    
    /* 📐 间距系统 - 8px 基准 */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-24: 6rem;    /* 96px */
    
    /* 🎭 阴影系统 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    
    /* ⚡ 动画曲线 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    
    /* 📱 布局断点 */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ---------- 暗色模式支持 ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0d1117;
        --color-bg-secondary: #161b22;
        --color-bg-elevated: #1c2128;
        
        --color-text-primary: #f0f6fc;
        --color-text-secondary: #c9d1d9;
        --color-text-tertiary: #8b949e;
        
        --color-border-light: #30363d;
        --color-border-default: #21262d;
        --color-border-strong: #6e7681;
        
        --color-accent: #58a6ff;
        --color-accent-hover: #79c0ff;
        --color-accent-subtle: #1f6feb26;
    }
}

/* ---------- 全局重置 ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ---------- 通用工具类 ---------- */
.container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 选择文本样式 ---------- */
::selection {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
}

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-default);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-strong);
}

/* ---------- 焦点样式 ---------- */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- 响应式图片 ---------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}