/* ============================================================
   WDELE — Design Tokens
   Brand:Industrial Control 红 + 深藏青(取自客户首页设计稿)。
   最终品牌色定稿后**只需改本文件 :root 两族**,前台/后台自动跟随。
   ⚠️ 设计稿暂定主色 #d82c05(红)/ 深色 #101828;待客户最终品牌规范定稿。
   ============================================================ */

:root {
  /* ---------- Brand colors(设计稿红系) ---------- */
  --color-primary:        #d82c05;   /* 主色(设计稿 --red) */
  --color-primary-hover:  #ad2204;   /* 主色 hover(--red-dark) */
  --color-primary-light:  #f04e1f;   /* 亮红(渐变/光晕) */
  --color-primary-dark:   #8f1c03;   /* 深红(层次/深度) */

  --color-accent:         #e60213;   /* 强调 CTA(设计稿 --red-2) */
  --color-accent-hover:   #ad2204;   /* 强调 hover */
  --color-accent-soft:    #fdeeea;   /* 浅红底(chip/badge/cert-seal) */

  /* ---------- Neutral colors(设计稿中性) ---------- */
  --color-white:          #FFFFFF;
  --color-bg-gray:        #F7F8FA;   /* 冷浅灰(--bg-2) */
  --color-bg-dark:        #101828;   /* 深色区(--dark) */
  --color-bg-deep:        #0B1320;   /* 最深色区 / Footer */
  --color-text:           #1A1A1A;   /* --ink */
  --color-text-secondary: #344054;
  --color-text-muted:     #667085;   /* --mut */
  --color-text-inverse:   #FFFFFF;
  --color-border:         #E5E7EB;   /* --line */
  --color-border-dark:    rgba(255,255,255,0.08);

  /* ---------- Functional colors ---------- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #1EBE57;
  --color-success:        #1E8E3E;
  --color-error:          #C62828;

  /* ---------- Typography ---------- */
  /* 开 Arabic 语言时在此插入 'Noto Naskh Arabic' 并加载 fonts.css 对应 woff2 */
  --font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.375rem;  /* 22px */
  --font-size-xl:   1.75rem;   /* 28px */
  --font-size-2xl:  2.25rem;   /* 36px */
  --font-size-3xl:  3rem;      /* 48px */
  --font-size-4xl:  4rem;      /* 64px — hero */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:   1.15;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  --letter-spacing-wide:   0.02em;
  --letter-spacing-wider:  0.05em;
  --letter-spacing-hero:   0.06em;

  /* ---------- Spacing ---------- */
  --space-2xs: 0.25rem;  /* 4px  */
  --space-xs:  0.5rem;   /* 8px  */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 5rem;     /* 80px */
  --space-4xl: 8rem;     /* 128px */

  /* ---------- Layout ---------- */
  --container-max:    1200px;
  --container-narrow: 880px;
  --container-wide:   1400px;
  --header-height:    76px;
  --header-height-mobile: 64px;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* ---------- Shadows(中性;随设计稿) ---------- */
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 16px 44px rgba(16, 24, 40, 0.12);
  --shadow-card-hover: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;
}

/* ============================================================
   前台设计稿 shorthand(与上面 canonical 同源;base.css 迁移稿原样引用。
   与 canonical 一一对应 → 定稿只改 :root 一处即全局生效。)
   ============================================================ */
:root {
  --red:       #d82c05;   /* ≡ --color-primary */
  --red-2:     #e60213;   /* ≡ --color-accent */
  --red-dark:  #ad2204;   /* ≡ --color-primary-hover */
  --red-soft:  #fdeeea;   /* ≡ --color-accent-soft */

  --ink:       #1a1a1a;   /* ≡ --color-text */
  --mut:       #667085;   /* ≡ --color-text-muted */
  --line:      #e5e7eb;   /* ≡ --color-border */
  --bg:        #ffffff;
  --bg-2:      #f7f8fa;   /* ≡ --color-bg-gray */
  --dark:      #101828;   /* ≡ --color-bg-dark */
  --dark-2:    #1b2540;
  --white:     #ffffff;

  --shadow:    0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 22px 60px rgba(16, 24, 40, 0.14);
  --radius:    6px;
}