/* ============================================================
   OSHNENG 欧适能 · 设计 Token 唯一源头
   ------------------------------------------------------------
   全站（v1 主站 / v2 / v3 / emc / guanli / hero 动画）所有
   颜色、字号、间距、圆角、阴影、动效必须从这里取值。
   改主色/改风格 = 只改本文件。禁止在页面/组件里硬编码。
   同步产物：tokens.json（脚本/Canvas/Tailwind 用）
             tailwind.preset.js（Tailwind 接入）
             shadcn-theme.css（v3 shadcn 主题变量映射）
   版本：v1.0.0（2026-07-22）
   ============================================================ */

:root {
  /* ── 品牌主色 OSH Red ─────────────────────────────────────
     唯一主色。v2/v3 的蓝色系为历史遗留，迁移期见
     docs/design-spec.md 第 8 章。 */
  --osh-brand-50:  #FCEFF0;
  --osh-brand-100: #F9DEE0;
  --osh-brand-200: #F2B8BD;
  --osh-brand-300: #EA8B93;
  --osh-brand-400: #E25762;
  --osh-brand-500: #E63946;   /* 主色 · 默认 */
  --osh-brand-600: #D02B38;
  --osh-brand-700: #C1121F;   /* hover/active */
  --osh-brand-800: #8E1620;
  --osh-brand-900: #5F1017;
  --osh-brand-950: #3A0A0E;
  --osh-brand-rgb: 230, 57, 70;

  /* ── 中性色（暖灰 · 带红棕倾向）────────────────────────── */
  --osh-ink-900: #1A1112;     /* 主文案 */
  --osh-ink-700: #4A3A3C;
  --osh-ink-600: #6A5A5C;     /* 次要文案 */
  --osh-ink-400: #9A8A8C;     /* 辅助/占位 */
  --osh-ink-200: #EDE5E5;     /* 边框 */
  --osh-ink-100: #F0E8E8;     /* 浅分隔 */
  --osh-ink-50:  #FAF6F6;     /* 浅底区块 */
  --osh-paper:   #FAF8F8;     /* 页面底色（暖白纸感） */
  --osh-white:   #FFFFFF;

  /* ── 语义色 ─────────────────────────────────────────────── */
  --osh-success:      #00A86B;  /* 在线/碳减排/正向指标 */
  --osh-success-bg:   #E6F6F0;
  --osh-warning:      #D97706;
  --osh-warning-bg:   #FCF3E3;
  --osh-danger:       #B42318;  /* 错误（区别于品牌亮红） */
  --osh-danger-bg:    #FBEAE8;
  --osh-info:         #6A5A5C;  /* 中性提示，不引入蓝色 */
  --osh-info-bg:      #F0E8E8;

  /* ── 暗色场景（hero / 数字孪生 / 暗底区块）────────────── */
  --osh-night-950: #060608;     /* 最深底 */
  --osh-night-900: #0B0607;     /* 品牌暗底 */
  --osh-night-800: #1C0A0B;     /* 暗红褐 */
  --osh-night-blue:#071A2C;     /* 雪夜蓝（hero 极寒场景专用） */
  --osh-frost:     #CFE3F5;     /* 冰雪文字（hero 极寒场景专用） */
  --osh-dark-text:        #FAF8F8;
  --osh-dark-text-sec:    rgba(250, 248, 248, .62);
  --osh-dark-text-muted:  rgba(250, 248, 248, .40);
  --osh-dark-border:      rgba(250, 248, 248, .12);
  --osh-dark-glass:       rgba(255, 255, 255, .12);  /* 暗底玻璃拟态 */

  /* ── 字体（硬规则：禁止 Google Fonts，见 AGENTS.md）───── */
  --osh-font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC',
                   'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  /* 英文大标题/数字点缀。DM Sans 仅允许本地 woff2 引入，未引入时自动回退系统栈 */
  --osh-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont,
                      'PingFang SC', 'Hiragino Sans GB', sans-serif;
  /* 数据/遥测/大数字 */
  --osh-font-num: 'DIN Alternate', 'Bahnschrift', 'DM Sans',
                  'SF Mono', Consolas, monospace;
  --osh-font-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code',
                   Consolas, monospace;

  /* ── 字号阶（px）───────────────────────────────────────── */
  --osh-text-xs:  12px;
  --osh-text-sm:  14px;
  --osh-text-md:  16px;
  --osh-text-lg:  18px;
  --osh-text-xl:  20px;
  --osh-text-2xl: 24px;
  --osh-text-3xl: 30px;
  --osh-text-4xl: 36px;
  --osh-text-5xl: 48px;
  --osh-text-6xl: 60px;
  --osh-text-7xl: 72px;

  --osh-leading-tight:   1.2;
  --osh-leading-snug:    1.4;
  --osh-leading-normal:  1.6;
  --osh-leading-relaxed: 1.8;

  /* 字距：德系小标签靠大字距 */
  --osh-tracking-label:  0.3em;   /* EN 小标签（如 SOLUTIONS） */
  --osh-tracking-wide:   0.15em;
  --osh-tracking-normal: 0;
  --osh-tracking-tight:  -0.02em; /* 大标题 */

  /* ── 间距阶（4px 基数）─────────────────────────────────── */
  --osh-space-1:  4px;
  --osh-space-2:  8px;
  --osh-space-3:  12px;
  --osh-space-4:  16px;
  --osh-space-5:  20px;
  --osh-space-6:  24px;
  --osh-space-8:  32px;
  --osh-space-10: 40px;
  --osh-space-12: 48px;
  --osh-space-16: 64px;
  --osh-space-20: 80px;
  --osh-space-24: 96px;
  --osh-space-32: 128px;

  /* ── 圆角（德系工业：小圆角为主，忌大圆角）────────────── */
  --osh-radius-none: 0;
  --osh-radius-sm:   2px;
  --osh-radius-md:   4px;
  --osh-radius-lg:   8px;
  --osh-radius-xl:   12px;
  --osh-radius-2xl:  16px;
  --osh-radius-full: 999px;

  /* ── 阴影 ───────────────────────────────────────────────── */
  --osh-shadow-card: 0 1px 2px rgba(26, 17, 18, .05),
                     0 4px 16px rgba(26, 17, 18, .04);
  --osh-shadow-card-hover: 0 4px 12px rgba(26, 17, 18, .08),
                           0 16px 40px rgba(26, 17, 18, .08);
  --osh-shadow-elevated: 0 8px 24px rgba(26, 17, 18, .12);
  --osh-shadow-glow:      0 4px 20px rgba(var(--osh-brand-rgb), .4);   /* 主按钮 */
  --osh-shadow-glow-lg:   0 6px 24px rgba(var(--osh-brand-rgb), .6);   /* 主按钮 hover */

  /* ── 动效 ───────────────────────────────────────────────── */
  --osh-duration-fast:   150ms;
  --osh-duration-normal: 300ms;
  --osh-duration-slow:   600ms;
  --osh-ease-out:    cubic-bezier(0, 0, .2, 1);
  --osh-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --osh-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── 断点（JS/Canvas 读取用；CSS 里用 @media 字面值）──── */
  --osh-bp-sm: 640px;
  --osh-bp-md: 768px;
  --osh-bp-lg: 1024px;
  --osh-bp-xl: 1280px;
  --osh-bp-2xl: 1440px;

  /* ── 容器 ───────────────────────────────────────────────── */
  --osh-container-max: 1280px;
  --osh-container-pad: 20px;

  /* ── 层级 ───────────────────────────────────────────────── */
  --osh-z-base:     1;
  --osh-z-dropdown: 100;
  --osh-z-sticky:   500;
  --osh-z-nav:      1000;
  --osh-z-overlay:  2000;
  --osh-z-modal:    3000;
  --osh-z-toast:    4000;
}

@media (min-width: 768px) {
  :root { --osh-container-pad: 40px; }
}

/* 动效偏好：全站统一尊重（硬规则） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --osh-duration-fast:   0ms;
    --osh-duration-normal: 0ms;
    --osh-duration-slow:   0ms;
  }
}