/* ==========================================================================
   GRIPCEO Safety — Design Tokens
   来源：PRD v1.0 第 2 章（品牌色 / 字体规范）
   说明：所有视觉取值集中于此，组件样式一律引用变量，不写死颜色。
   ========================================================================== */

:root {

  /* ---------- 品牌色 Brand ------------------------------------------------ */
  --c-primary:        #1A3A5C;  /* 深海蓝 — 导航、主标题、主按钮、页脚 */
  --c-primary-dark:   #12293F;  /* 深蓝加深，用于 hover / 深色区块 */
  --c-primary-mid:    #2C5480;  /* 深蓝中间调，用于次级元素 */
  --c-primary-soft:   #4A6B8A;  /* 深蓝柔化，用于辅助文字（浅底） */
  --c-primary-100:    #E8EEF4;  /* 深蓝浅底，用于选中态 / 标签底 */
  --c-primary-50:     #F4F7FA;  /* 深蓝最浅底 */

  --c-accent:         #FF6B35;  /* 安全橙 — CTA、徽章、高亮 */
  --c-accent-dark:    #E4561F;  /* 橙色 hover */
  --c-accent-100:     #FFEDE5;  /* 橙色浅底 */

  --c-secondary:      #4DB8E8;  /* 亮青色 — 次要按钮、链接、图标 */
  --c-secondary-dark: #2E9BCE;  /* 青色 hover */
  --c-secondary-100:  #E6F5FD;  /* 青色浅底 */

  /* ---------- 文字 Text --------------------------------------------------- */
  --c-text:           #1F2937;  /* 主文字 */
  --c-text-muted:     #6B7280;  /* 次要文字 */
  --c-text-invert:    #FFFFFF;  /* 深色底上的文字 */
  --c-text-invert-70: rgba(255,255,255,.72);
  --c-text-invert-45: rgba(255,255,255,.45);

  /* ---------- 表面 Surfaces ---------------------------------------------- */
  --c-bg:             #FFFFFF;
  --c-bg-alt:         #F3F4F6;  /* 浅灰背景 — 交替区块 */
  --c-bg-dark:        #1A3A5C;
  --c-border:         #E5E7EB;  /* 分割线、卡片边框 */
  --c-border-strong:  #D1D5DB;
  --c-white:          #FFFFFF;

  /* ---------- 语义色 Semantic -------------------------------------------- */
  --c-success:        #1D9E75;
  --c-success-100:    #E1F5EE;
  --c-warning:        #BA7517;
  --c-warning-100:    #FAEEDA;
  --c-danger:         #E24B4A;
  --c-danger-100:     #FCEBEB;

  /* ---------- 字体 Typography ------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, Monaco, monospace;

  /* PRD 2.2 层级：桌面值为准，移动端用 clamp 收窄 */
  --fs-h1:      clamp(32px, 4.6vw, 48px);
  --fs-h2:      clamp(26px, 3.4vw, 36px);
  --fs-h3:      clamp(20px, 2.2vw, 24px);
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-btn:     16px;

  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.4;
  --lh-h4: 1.4;
  --lh-body: 1.6;
  --lh-sm: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-eyebrow: .12em;

  /* ---------- 间距 Spacing（8pt 栅格） ---------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --section-y:      clamp(56px, 7vw, 96px);
  --section-y-sm:   clamp(40px, 5vw, 64px);

  /* ---------- 圆角 Radius ------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ---------- 阴影 Shadow ------------------------------------------------ */
  --sh-sm:  0 1px 2px rgba(16,24,40,.05);
  --sh-md:  0 4px 12px rgba(16,24,40,.07);
  --sh-lg:  0 12px 32px rgba(16,24,40,.10);
  --sh-xl:  0 24px 48px rgba(16,24,40,.14);

  /* ---------- 布局 Layout ------------------------------------------------ */
  --container:  1280px;
  --container-narrow: 880px;
  --measure:    68ch;

  /* ---------- 动效 Motion ------------------------------------------------ */
  --t-fast: .16s ease;
  --t-base: .26s ease;
  --t-slow: .5s cubic-bezier(.22,.61,.36,1);

  /* ---------- 层级 Z-index ---------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-overlay: 900;
  --z-fab: 950;
  --z-toast: 1000;
}