/* ============================================================================
  DESIGN SYSTEM TOKENS & CONFIGURATION
  设计系统核心配置文档
  
  原则：
  1. Single Source of Truth (SSOT): 所有设计决策（颜色、间距、字号）均在此定义。
  2. Fluidity: 使用 clamp() 函数实现从移动端到桌面的平滑缩放，无需断点跳跃。
  3. Semantic Naming: 变量名描述其"用途"而非"外观" (例如: --color-surface 而非 --color-white)。
  ============================================================================
*/

:root {

  /* --------------------------------------------------------------------------
    1. TYPOGRAPHY SYSTEM (排版系统)
    --------------------------------------------------------------------------
  */
  
  /* Font Families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Merriweather", "Georgia", serif;
  --font-mono: "Fira Code", "Consolas", monospace;

  /* [Brand / Display Font]*/
  --font-brand: "BBH Sans Bartle", "Montserrat", sans-serif;

  /* [Heading Font]*/
  --font-heading: "Montserrat", "Noto Sans JP", "Noto Sans SC", sans-serif;

  /* [Body Font]*/
  --font-body: "Open Sans", "Noto Sans JP", "Noto Sans SC", sans-serif;

  /* 注意：将 Noto Sans (JP/SC) 放在英文字体后面。*/
  
  /* Font Sizes (Fluid Scale)
   假设基准：移动端 16px -> 桌面端 18px
   */
  --text-xs:  clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); /* 辅助文字 */
  --text-sm:  clamp(0.875rem, 0.83rem + 0.23vw, 1rem);    /* 正文小号 */
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);   /* 正文标准 */
  --text-md:  clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem); /* 副标题 */
  --text-lg:  clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);   /* H3 */
  --text-xl:  clamp(1.5rem, 1.36rem + 0.68vw, 2rem);      /* H2 */
  --text-2xl: clamp(2rem, 1.73rem + 1.36vw, 3rem);        /* H1 */
  --text-3xl: clamp(2.5rem, 2.16rem + 1.70vw, 4rem);      /* Display/Hero */

  /* Font Weights (字重)*/
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;
  
  /* Line Heights (Leading) - 这里的数值是倍数 */
  --leading-tight: 1;   /* 用于大标题，紧凑 */
  --leading-snug: 1.1;    /* 用于小标题 */
  --leading-normal: 1.3;  /* 用于正文，易读性最佳 */
  --leading-loose: 1.8;   /* 用于特别宽松的展示文本 */

  /* Letter Spacing (Tracking) */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em; /* 用于全大写的小标题 */


  /* --------------------------------------------------------------------------
    2. SPACING SYSTEM (间距系统)
    基于 4px 网格系统的流体间距。
    --------------------------------------------------------------------------
  */
  --space-2xs: clamp(4px, 2px + 0.5vw, 6px);
  --space-xs:  clamp(8px, 6px + 0.5vw, 12px);
  --space-sm:  clamp(16px, 14px + 0.5vw, 20px);  /* 常用组件内边距 */
  --space-md:  clamp(24px, 20px + 1vw, 32px);    /* 常用块间距 */
  --space-lg:  clamp(48px, 40px + 2vw, 64px);    /* 章节分割 */
  --space-xl:  clamp(64px, 50px + 4vw, 96px);    /* 大区块分割 */
  --space-2xl: clamp(96px, 80px + 6vw, 160px);   /* 页面级留白 */


  /* --------------------------------------------------------------------------
    3. LAYOUT & STRUCTURE (布局与结构)
    定义容器宽度、圆角、层级等物理属性。
    --------------------------------------------------------------------------
  */
  
  /* Container Max-Widths */
  --container-sm: 640px;  /* 文章/阅读模式 */
  --container-md: 960px;  /* 标准布局 */
  --container-lg: 1280px; /* 宽屏布局 */
  --container-full: 100%; /* 全宽 */

  /* Border Radius */
  --radius-of: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;  /* 胶囊形/圆形 */

  /* Z-Index Layers (语义化层级) */
  --layer-base: 1;
  --layer-sticky: 100;    /* 粘性导航 */
  --layer-overlay: 200;   /* 遮罩层 */
  --layer-modal: 300;     /* 弹窗 */
  --layer-toast: 400;     /* 全局提示 */
  --layer-loader: 9999;   /* 加载页面 */


  /* --------------------------------------------------------------------------
    4. COLOR PALETTE (色彩系统)
    使用 HSL 模式以便于动态调整透明度和主题切换。
    格式: Hue, Saturation, Lightness
    --------------------------------------------------------------------------
  */
  
  /* Brand Colors */
  --color-primary-h: 180;
  --color-primary-s: 90%;
  --color-primary-l: 56%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

  /* Neutral Colors (Grayscale) */
  --color-bg-body:      hsl(0, 0%, 98%);    /* 页面背景 */
  --color-bg-surface:   hsl(0, 0%, 100%);   /* 卡片背景 */
  --color-bg-button:    hsl(0, 0%, 90%);   /* 卡片背景 */
  --color-text-main:    hsl(0, 0%, 10%);    /* 主要文字 */
  --color-text-muted:   hsl(0, 0%, 40%);    /* 次要文字 */
  --color-border:       hsl(0, 0%, 90%);    /*  边框线  */

}

/* ============================================================================
  LAYOUT UTILITIES
  基于设计令牌的通用布局类
  ============================================================================
*/

/* 1. TYPOGRAPHY APPLICATION
  将变量应用到具体标签，确保一致性
*/
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  width: 100%;      /* 不要使用 100vw */
  overflow-x: hidden; /* 强制禁止水平滚动，这是现代网页的标准做法 */
}

h1, h2, h3, h4 {
  font-family: var(--font-sans); /* 或 serif，根据设计 */
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
  color: var(--color-text-main);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { margin-bottom: var(--space-md); }
small { font-size: var(--text-xs); color: var(--color-text-muted); }


/* 2. GRID SYSTEM (左右分栏)
  响应式网格：手机单栏，大屏多栏
*/
.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr; /* 默认手机单列 */
  gap: var(--space-md);
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* 侧边栏布局 (左侧固定，右侧自适应) */
.grid-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* 媒体查询：桌面端行为 */
@media (min-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr); /* 两等分 */
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr); /* 三等分 */
  }
  .grid-sidebar {
    grid-template-columns: 250px 1fr; /* 左侧固定 250px */
  }
}


/* 3. FLEX STACK (上下分栏/垂直堆叠)
  用于控制垂直方向的间距和对齐
*/
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* 默认间距 */
}

.stack-lg { gap: var(--space-lg); }
.stack-sm { gap: var(--space-sm); }

.stack-center {
  align-items: center;
  text-align: center;
}


/* 4. WRAPPERS (容器)
*/
.wrapper {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.wrapper-narrow {
  max-width: var(--container-sm); /* 阅读模式宽度 */
}


/* ============================================================================
   MOBILE GLOBAL SCALE
   Description: 强制手机端以 80% 比例渲染，获得更精致的视觉效果
   ============================================================================ */

@media (max-width: 480px) {
    :root {
            /* 手机端直接锁定一个舒适的阅读大小，不用让 CPU 去算 clamp */
            --text-2xl: 1.5rem; /* 约 20px */
            --text-3xl: 2rem;  /* 约 24px */
        }
}