/* ============================================================================
   RESET & BASE STYLES
   清除浏览器的"自作主张"，确保所有计算从 0 开始。
   ============================================================================ */

/* 1. 消除默认边距与内边距 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 2. 强制盒模型 (Crucial!)
   这是布局中最重要的一行代码。
   它确保 padding 和 border 不会增加元素的宽度。
   例如：width 100% + padding 20px 依然等于 100%，而不是 100% + 40px。
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================================================
   GLOBAL: THEME TRANSITIONS (全局主题平滑过渡)
   ============================================================================ */

body {
    /* 1. 必须确保有初始颜色，否则浏览器无法计算过渡起点 */
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    
    /* 2. 核心魔法：让背景色、文字色、边框色都能平滑过渡 */
    transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ⚠️ 防御性修复：如果您给某些特定的全屏容器（比如阅读器）单独写了背景色，它们也需要加上过渡！ */
#portfolio-viewer,
.portfolio-main,
.pj-custom-header {
    transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}