/* ============================================================
   光中传媒 · index-v3 设计变量系统 (Design Tokens)
   文件: tokens.css
   说明: 全站根基变量, 所有组件一律引用 var(), 禁止硬编码
   ============================================================ */

:root {
  /* ============================================================
     1. 品牌色 (克制使用, 橙+青总面积 < 5%)
     ============================================================ */
  --color-brand:         #FFA000;   /* 品牌橙 - 召唤色 / CTA / 数据强调 / hover流动 (面积 < 3%) */
  --color-brand-deep:    #CC8000;   /* 品牌橙深 - hover按压 / 渐变终点 */
  --color-brand-light:   #FFB84D;   /* 品牌橙浅 - 渐变起点 / 扫光前端 */
  --color-cyan:          #00A8C6;   /* 品牌青 - 确认色 / 完成态 / 进度锁定 / 图标 (面积 < 2%) */
  --color-cyan-deep:     #007A91;   /* 品牌青深 - 渐变起点 */
  --color-cyan-light:    #2BD4EF;   /* 品牌青浅 - 渐变终点 / 光晕 */
  --color-hover:         var(--color-cyan);  /* 全局hover高亮 (与青对齐, 控制同屏彩度) */

  /* 表单即时反馈光效色 */
  --color-success-glow:  #2BC48A;   /* 合法确认绿光 (仅用于输入框底部短暂扫光) */
  --color-error-glow:    var(--color-brand-deep);  /* 错误态橙光 */

  /* ============================================================
     2. 中性色 (暖白纸感基调, 占比 ~95%)
     ============================================================ */
  --color-bg:            #F7F5F2;   /* 暖白纸 - 主背景 (~55%) */
  --color-bg-alt:        #FFFFFF;   /* 纯白 - 卡片/次级背景 (~20%) */
  --color-text:          #1A1A1A;   /* 主文字 - 深墨 */
  --color-text-secondary:#6B6B6B;   /* 次文字 - 中灰 */
  --color-text-muted:    #A8A8A8;   /* 弱文字 - 浅灰 */
  --color-divider:       #E8E5E0;   /* 分割线 - 暖米色 */

  /* 深色章节色 (仅About/轮播案例用, ~22%) */
  --color-dark-bg:       #0F1115;   /* 深墨底 */
  --color-dark-bg-alt:   #161A20;   /* 深墨卡片次底 */
  --color-dark-text:     #EDEDED;   /* 深底主文字 */
  --color-dark-text-secondary: #888;/* 深底次文字 */
  --color-dark-divider:  rgba(255,255,255,0.08); /* 深底分割线 */

  /* ============================================================
     3. 字体系统
     ============================================================ */
  --font-zh: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-en: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Consolas", "Noto Sans Mono", "Monaco", monospace;

  /* 字号阶梯 (size / weight / letter-spacing / line-height) */
  --text-hero-size:      clamp(48px, 7vw, 96px);
  --text-hero-weight:    400;
  --text-hero-leading:   1.08;
  --text-hero-spacing:   -0.02em;

  --text-section-size:   clamp(32px, 4.2vw, 48px);
  --text-section-weight: 500;
  --text-section-leading: 1.2;
  --text-section-spacing: -0.01em;

  --text-sub-size:       clamp(20px, 2vw, 24px);
  --text-sub-weight:     500;
  --text-sub-leading:    1.3;

  --text-body-size:      16px;
  --text-body-weight:    400;
  --text-body-leading:   1.7;

  --text-aux-size:       13px;
  --text-aux-weight:     400;
  --text-aux-spacing:    0.05em;
  --text-aux-leading:    1.5;

  --text-data-size:      clamp(48px, 8vw, 72px);
  --text-data-weight:    300;
  --text-data-leading:   1.0;
  --text-data-spacing:   -0.02em;

  /* ============================================================
     4. 网格系统
     ============================================================ */
  --grid-columns:        12;
  --grid-gap:           24px;
  --grid-max-width:     1280px;            /* 内容区最大宽 */
  --grid-max-width-nav: 1440px;            /* 导航/Hero更宽, 视觉舒展 */
  --grid-margin:         min(8vw, 120px);  /* 侧边距 */

  /* ============================================================
     5. 间距阶 (4px 基数)
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-40:  160px;

  /* 章节级间距 */
  --section-padding-top:    120px;
  --section-padding-bottom: 120px;

  /* 段落宽度 (45-75字符) */
  --paragraph-max-width: 65ch;

  /* ============================================================
     6. 动效系统 (transform + opacity 优先, 禁用 top/left/width 动画)
     ============================================================ */
  --ease-enter:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-interact:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-sweep:     cubic-bezier(0.22, 1, 0.36, 1);

  --duration-enter-short: 0.55s;
  --duration-enter-long:  0.9s;
  --duration-interact:    0.3s;
  --duration-interact-long: 0.45s;
  --duration-sweep:       0.6s;   /* 扫光时长 (表单/卡片底边) */

  /* ============================================================
     7. 圆角 (全站统一 4px 纪律感)
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 999px;  /* 仅胶囊按钮/导航用 */

  /* ============================================================
     8. 阴影 (收敛使用, 靠背景色差分层)
     ============================================================ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-card-hover: 0 16px 40px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.08);

  /* ============================================================
     9. 层级 z-index
     ============================================================ */
  --z-base:     1;        /* Hero 光效 WebGL Canvas 背景 */
  --z-vignette: 3;        /* 环境暗角层（背景之上 · 文字之下，避免压暗白字） */
  --z-content:  10;       /* 标题 · 业务项 · 正文文字层 */
  --z-beam:     20;       /* 屏幕空间扫光/亮斑层（文字之上，给字加光效） */
  --z-sticky:   100;      /* 液态玻璃导航 */
  --z-progress: 101;      /* 导航底部滚动进度条 */
  --z-overlay:  500;
  --z-modal:    1000;
  --z-loader:   3000;     /* Loader开场 */

  /* ============================================================
     11. 导航 & 滚动进度条
     ============================================================ */
  --nav-height:          72px;
  --nav-progress-height: 2px;      /* 极细 2px */
  --nav-progress-trail:  10px;     /* 进度条末端羽化拖尾宽度 */

  /* ============================================================
     12. Hero 比例 (Phase1：100vh 全屏开场 → Phase2：70vh+30vh 挤压成型)
     ============================================================ */
  --hero-phase1-height:  100vh;
  --hero-upper-height:   70vh;
  --hero-lower-height:   30vh;
  --hero-total-height:   100vh;

  /* Hero LOGO 尺寸（W 背景图）：Phase2 = 挤压后经典尺寸，Phase1 = 入场 100vh 全屏时的更大尺寸 */
  --hero-logo-min:           180px;
  --hero-logo-preferred:     34vh;
  --hero-logo-max:           360px;
  --hero-logo-p1-min:        260px;
  --hero-logo-p1-preferred:  46vh;
  --hero-logo-p1-max:        520px;

  /* ============================================================
     13. 光效 - 表单/卡片扫光 (光影交互闭环)
     ============================================================ */
  --glow-form-success:  0 0 12px rgba(43,196,138,0.55);   /* 邮箱合法确认绿光 */
  --glow-form-error:    0 0 12px rgba(204,128,0,0.55);    /* 邮箱错误橙光 */
  --glow-btn-success:   0 0 40px rgba(0,168,198,0.25);    /* 提交成功青色光晕 */
  --glow-cta-hover:     inset 0 0 0 1px rgba(255,160,0,0.5), 0 0 0 4px rgba(255,160,0,0.08);
}

/* ============================================================
   响应式断点 - 变量微调
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --grid-margin: min(6vw, 64px);
    --section-padding-top: 100px;
    --section-padding-bottom: 100px;
  }
}
@media (max-width: 768px) {
  :root {
    --grid-margin: 20px;
    --grid-gap: 16px;
    --section-padding-top: 80px;
    --section-padding-bottom: 80px;
    --nav-height: 64px;
    --text-hero-size: clamp(40px, 10vw, 64px);
  }
}

/* 减弱动效偏好 - 全变量压缩 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-enter-short: 0.001ms;
    --duration-enter-long:  0.001ms;
    --duration-interact:    0.001ms;
    --duration-sweep:       0.001ms;
  }
}