/* ============================================================
   base.css — CSS 变量 / 主题 / Reset / 字体工具类
   [INPUT]: 无依赖
   [OUTPUT]: 全局 CSS 变量、主题、基础样式
   [POS]: 样式系统的根基，所有其他 CSS 文件依赖此文件
   [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
   ============================================================ */

:root {
    /* --- THEME VARIABLES --- */

    /* Default (Light/Sun) — 小米 MiMo 米白风格 */
    --bg-body: #EEE9E4;

    /* Toggle Specifics (Light) */
    --toggle-bg: #E8E2DC;
    --toggle-shadow: inset 2px 2px 6px rgba(33,53,71,0.12), inset -2px -2px 6px rgba(255,255,255,0.8);
    --toggle-radius: 24px;
    --indicator-bg: #ffffff;
    --indicator-shadow: 0 4px 10px rgba(33,53,71,0.15);
    --indicator-x: 100%;
    --icon-color: #9CA3AF;
    --icon-active: #213547;

    /* CARD STYLE 1: Light — 温暖白卡 */
    --c1-bg: #FFFFFF;
    --c1-text: #213547;
    --c1-sub: #6B7280;
    --c1-dot: rgba(33,53,71,0.08);

    /* CARD STYLE 2: 深青灰强调卡（原蓝色） */
    --c2-bg: #213547;
    --c2-text: #FAF7F5;
    --c2-dot: rgba(255,255,255,0.08);
    --c2-tag-shadow: 0 4px 10px rgba(33,53,71,0.2);

    /* CARD STYLE 3: 米白深色卡 */
    --c3-bg: #FAF7F5;
    --c3-text: #213547;
    --c3-border: rgba(33,53,71,0.08);
    --c3-texture: rgba(33,53,71,0.025);
    --c3-sub: rgba(33,53,71,0.55);
    --c3-icon: rgba(33,53,71,0.06);

    /* Social Buttons */
    --social-btn-bg: rgba(33,53,71,0.07);
    --social-btn-hover: rgba(33,53,71,0.14);

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(33,53,71,0.06), 0 1px 2px rgba(33,53,71,0.04);
    --shadow-hover: 0 20px 40px -5px rgba(33,53,71,0.18);

    /* Constants */
    --radius: 24px;
    --gap: 16px;
    --transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Fonts */
    --font-main: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Post View Variables - Light Theme */
    --pv-bg: #FAF7F5;
    --pv-text: #213547;
    --pv-text-secondary: #6B7280;
    --pv-text-muted: #9CA3AF;
    --pv-title: #213547;
    --pv-heading: #213547;
    --pv-border: rgba(33,53,71,0.1);
    --pv-code-bg: #F3F0ED;
    --pv-code-text: #213547;
    --pv-blockquote-bg: rgba(33,53,71,0.03);
    --pv-btn-border: rgba(33,53,71,0.2);
    --pv-btn-text: #213547;
    --pv-btn-hover-bg: rgba(33,53,71,0.05);
}

/* --- ORANGE THEME — 暨光橙，温暖有力 --- */
[data-theme="orange"] {
    --bg-body: #F5EDE3;

    --toggle-bg: #EDE0D0;
    --toggle-shadow: inset 2px 2px 6px rgba(180,80,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.7);
    --indicator-bg: #ffffff;
    --indicator-shadow: 0 4px 12px rgba(220,90,0,0.25);
    --indicator-x: 0%;
    --icon-color: rgba(180,80,0,0.3);
    --icon-active: #C85000;

    /* 白卡 — 暖白底色 */
    --c1-bg: #FFFAF5;
    --c1-text: #1A0A00;
    --c1-sub: #7A4020;
    --c1-dot: rgba(200,80,0,0.1);

    /* 强调卡 — 鲜橙色 */
    --c2-bg: #E55A00;
    --c2-text: #FFFAF5;
    --c2-dot: rgba(255,255,255,0.1);
    --c2-tag-shadow: 0 4px 10px rgba(200,80,0,0.3);

    /* 深色卡 — 深棕色 */
    --c3-bg: #2A1000;
    --c3-text: #FFFAF5;
    --c3-border: rgba(255,255,255,0.1);
    --c3-texture: rgba(255,255,255,0.04);
    --c3-sub: rgba(255,250,245,0.6);
    --c3-icon: rgba(255,255,255,0.08);

    --social-btn-bg: rgba(200,80,0,0.1);
    --social-btn-hover: rgba(200,80,0,0.2);

    --shadow-card: 0 2px 8px rgba(200,80,0,0.1), 0 1px 2px rgba(200,80,0,0.06);
    --shadow-hover: 0 20px 40px -5px rgba(200,80,0,0.25);

    --pv-bg: #FDF5EC;
    --pv-text: #1A0A00;
    --pv-text-secondary: #7A4020;
    --pv-text-muted: #B06030;
    --pv-title: #1A0A00;
    --pv-heading: #E55A00;
    --pv-border: rgba(200,80,0,0.12);
    --pv-code-bg: rgba(200,80,0,0.07);
    --pv-code-text: #C84000;
    --pv-blockquote-bg: rgba(200,80,0,0.05);
    --pv-btn-border: rgba(200,80,0,0.25);
    --pv-btn-text: #1A0A00;
    --pv-btn-hover-bg: rgba(200,80,0,0.08);
}

[data-theme="orange"] .logo { color: #1A0A00; }

/* --- DARK THEME — 深青灰，克制不刺眼 --- */
[data-theme="dark"] {
    --bg-body: #0F1519;

    --toggle-bg: #1C2428;
    --toggle-shadow: none;
    --indicator-bg: #2D3E4A;
    --indicator-shadow: 0 4px 10px rgba(0,0,0,0.4);
    --indicator-x: 200%;
    --icon-color: rgba(250,247,245,0.25);
    --icon-active: #FAF7F5;

    --c1-bg: #16202A;
    --c1-text: #E8E0D8;
    --c1-sub: #8A9BA8;
    --c1-dot: rgba(250,247,245,0.07);

    --c2-bg: #1E3A4A;
    --c2-text: #FAF7F5;
    --c2-dot: rgba(255,255,255,0.06);
    --c2-tag-shadow: 0 4px 10px rgba(0,0,0,0.4);

    --c3-bg: #1C2C38;
    --c3-text: #E8E0D8;
    --c3-border: rgba(250,247,245,0.08);
    --c3-texture: rgba(250,247,245,0.03);
    --c3-sub: rgba(232,224,216,0.55);
    --c3-icon: rgba(250,247,245,0.07);

    --social-btn-bg: rgba(250,247,245,0.08);
    --social-btn-hover: rgba(250,247,245,0.15);

    --shadow-card: 0 4px 20px rgba(0,0,0,0.35);
    --shadow-hover: 0 20px 40px -5px rgba(0,0,0,0.5);

    --pv-bg: #0F1519;
    --pv-text: #D0C8C0;
    --pv-text-secondary: #8A9BA8;
    --pv-text-muted: #5A6B78;
    --pv-title: #E8E0D8;
    --pv-heading: #7BAFC8;
    --pv-border: rgba(250,247,245,0.08);
    --pv-code-bg: #1C2C38;
    --pv-code-text: #7BAFC8;
    --pv-blockquote-bg: rgba(250,247,245,0.04);
    --pv-btn-border: rgba(250,247,245,0.2);
    --pv-btn-text: #E8E0D8;
    --pv-btn-hover-bg: rgba(250,247,245,0.07);
}

/* ============================================================
   Fluid Background Canvas
   ============================================================ */
#fluid-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* 确保内容层在 canvas 之上 */
#main-header,
#main-content,
#blog-list-view,
#post-view,
#reading-progress {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Reset & Base
   ============================================================ */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

*:focus { outline: none; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-body);
    color: var(--c1-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.4s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}
a:hover { opacity: 0.7; }

ul { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   Typography Utilities
   ============================================================ */
.serif-italic { font-family: var(--font-serif); font-style: italic; }
.font-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   Container
   ============================================================ */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}