/**
 * Design Tokens — 全站视觉属性的单一事实来源
 *
 * 所有颜色、间距、字号、网格参数都只在此文件定义。
 * 其他 CSS 文件只引用这些变量，禁止硬编码。
 * Customizer 的 dynamic-css.php 通过覆盖这些变量来实现动态样式。
 *
 * 命名规则: --en-{category}-{property}[-{variant}]
 */

:root {
  /* ========================================
     SPACING SCALE
     ======================================== */
  --en-space-xs:  4px;
  --en-space-sm:  8px;
  --en-space-md:  16px;
  --en-space-lg:  24px;
  --en-space-xl:  48px;
  --en-space-2xl: 80px;
  --en-space-3xl: 120px;

  /* ========================================
     COLORS
     ======================================== */
  --en-color-bg:         #ffffff;
  --en-color-text:       #222222;
  --en-color-heading:    #111111;
  --en-color-muted:      #777777;
  --en-color-text-muted: #777777;
  --en-color-text-light: #aaaaaa;
  --en-color-surface:    #f5f5f5;
  --en-color-border:     #eeeeee;
  --en-color-overlay:    rgba(0, 0, 0, 0.4);
  --en-color-accent:     #222222;

  /* ========================================
     TYPOGRAPHY (SYSTEM PROPERTY LIBRARY)
     ======================================== */
  /*中英文混排优先字体栈，英文字体优先，中文在后。*/
  --en-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  
  /* 行高系统 (Line Height System) */
  --en-lh-tight:       1.2;
  --en-lh-heading:     1.3;
  --en-lh-body:        1.6;
  --en-lh-loose:       1.8;

  /* 垂直间距系统 (Vertical Rhythm margin-bottom) */
  --en-spacing-mb-heading: 0.5em;
  --en-spacing-mb-body:    1.5em;

  /* 阶梯排版库 (Type Scale System) Fluid Clamp: clamp(MIN, VAL, MAX) */
  --en-fs-d1:    clamp(48px,  6vw, 72px);  /* Display 1 */
  --en-fs-d2:    clamp(40px,  5vw, 56px);  /* Display 2 */
  
  --en-fs-h1:    clamp(36px,  4.5vw, 48px); /* Heading 1 */
  --en-fs-h2:    clamp(28px,  3.5vw, 36px); /* Heading 2 */
  --en-fs-h3:    clamp(24px,  3vw,   28px); /* Heading 3 */
  --en-fs-h4:    clamp(20px,  2.5vw, 24px); /* Heading 4 */
  --en-fs-h5:    clamp(18px,  2vw,   20px); /* Heading 5 */
  --en-fs-h6:    clamp(16px,  1.5vw, 16px); /* Heading 6 */
  
  --en-fs-p-lg:  clamp(18px,  2vw,   20px); /* 大型正文 / 引语 */
  --en-fs-p:     clamp(16px,  1.5vw, 16px); /* 标准正文 (原 --en-font-size-md) */
  --en-fs-p-sm:  clamp(14px,  1vw,   14px); /* 次级小字正文 */
  --en-fs-caption: clamp(12px, 1vw,   12px); /* 辅助注脚 / 图注 */

  /* 字重预设 (Font Weight) */
  --en-fw-light:   300;
  --en-fw-normal:  400;
  --en-fw-medium:  500;
  --en-fw-semibold:600;
  --en-fw-bold:    700;

  /* ========================================
     LOGO
     ======================================== */
  --en-logo-pt: 0px;
  --en-logo-pr: 0px;
  --en-logo-pb: 0px;
  --en-logo-pl: 0px;

  /* ========================================
     LAYOUT
     ======================================== */
  --en-page-pad:         30px;
  --en-page-pad-mobile:  15px;
  --en-page-pad-y:       120px;
  --en-page-pad-y-mobile:90px;
  --en-content-max:      100%;
  --en-container-max:    100%;

  /* ========================================
     HEADER — Structure
     ======================================== */
  --en-header-h:          120px;
  --en-header-h-mobile:   90px;
  --en-header-h-sticky:   90px;
  --en-header-max-w:      100%;
  --en-header-px:         30px;   /* 关联全局 --en-page-pad */
  --en-header-px-mobile:  15px;   /* 关联全局 --en-page-pad-mobile */
  --en-header-search-gap: 20px;

  /* ========================================
     HEADER — Light Color Scheme
     ======================================== */
  --en-header-light-bg:           #ffffff;
  --en-header-light-opacity:      1;
  --en-header-light-border-color: #eaeaea;
  --en-header-light-border-w:     1px;

  /* ========================================
     HEADER — Dark Color Scheme
     ======================================== */
  --en-header-dark-bg:            #111111;
  --en-header-dark-opacity:       1;
  --en-header-dark-border-color:  #333333;
  --en-header-dark-border-w:      1px;

  /* ========================================
     NAVIGATION
     ======================================== */
  --en-nav-font-size:    30px;
  --en-nav-font-weight:  500;
  --en-nav-transform:    none;
  --en-nav-letter-space: 0.02em;
  --en-nav-item-gap:     30px;

  /* Navigation — Light scheme colors */
  --en-nav-color-light:  #222222;
  --en-nav-hover-light:  #707070;

  /* Navigation — Dark scheme colors */
  --en-nav-color-dark:   #ffffff;
  --en-nav-hover-dark:   #aaaaaa;

  /* Navigation — Underline */
  --en-nav-u-show:       1;
  --en-nav-u-h:          1px;
  --en-nav-u-offset:     -4px;

  /* ========================================
     FUNCTIONAL ELEMENTS
     ======================================== */
  --en-hamburger-size:   24px;
  --en-icon-stroke:      1.5px;

  /* ========================================
     PORTFOLIO GRID
     ======================================== */
  --en-grid-cols-dt:         3;
  --en-grid-cols-tablet:     2;
  --en-grid-cols-mobile:     1;
  --en-grid-gap:             18px;
  --en-grid-aspect:          4 / 3;
  --en-grid-border-color:    #000000; /* 线框网格模式下的边框颜色 */

  /* Grid — Typography */
  --en-grid-title-size:      16px;
  --en-grid-subtitle-size:   14px;
  /* --en-grid-title-color: (optional, falls back to --en-color-heading) */
  /* --en-grid-text-color:  (optional, falls back to --en-color-text) */
  /* --en-grid-card-bg:     (optional, default transparent) */

  /* Grid — Overlay */
  --en-grid-overlay-bg:      #000000;
  --en-grid-overlay-opacity: 0.4;

  /* Grid — Alignment */
  --en-grid-text-align:      left;
  --en-grid-info-valign:     bottom;

  /* ========================================
     PORTFOLIO SLIDER
     ======================================== */
  --en-slider-title-fz:      16px;
  --en-slider-title-fw:      400;
  --en-slider-overlay-color: rgba(0, 0, 0, 0.3);
  --en-slider-max-h:         900px;

  /* ========================================
     PROJECT DETAIL
     ======================================== */
  --en-project-title-fz:    16px;
  --en-project-title-fw:    400;
  --en-project-subtitle-fz: 16px;
  --en-project-subtitle-fw: 400;
  --en-project-meta-fz:     13.5px;
  --en-project-meta-fw:     700;
  --en-gallery-gap:         6px;
  --en-title-color:         #222222;
  --en-sub-color:           #666666;

  /* ========================================
     FOOTER
     ======================================== */
  --en-footer-pt:           60px;
  --en-footer-pb:           60px;
  --en-footer-light-bg:     #ffffff;
  --en-footer-light-color:  #333333;
  --en-footer-dark-bg:      #111111;
  --en-footer-dark-color:   #cccccc;

  /* ========================================
     BOTTOM BAR (独立色彩)
     ======================================== */
  --en-bottombar-h:       40px;
  --en-bottombar-bg:      #f5f5f5;
  --en-bottombar-color:   #666666;
  --en-bottombar-link:    #333333;
  --en-bottombar-fz:      12px;
  --en-bottombar-border:  #eeeeee;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --en-t-fast:   0.2s ease;
  --en-t-normal: 0.3s ease;
  --en-t-slow:   0.5s ease;

  /* ========================================
     BREAKPOINTS
     ======================================== */
  --en-bp-tablet: 1024px;
  --en-bp-mobile: 778px;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --en-z-header:   100;
  --en-z-floating: 110;
  --en-z-overlay:  200;
  --en-z-modal:    300;
}

[data-scheme="dark"] { --en-grid-border-color: #ffffff; }