/* =========================================================================
   tokens.css — 天津蓝拓塑料包装官网 · 设计变量（全站唯一来源）
   版本 v1.0 ｜ 规范见 docs/design-spec.md 第 10 节（逐行落地，未另发明变量）
   规则：任何页面样式只允许引用本文件的变量，不得硬编码色值/字号/间距。
   ========================================================================= */
:root{
  /* ---------- 1. 藏蓝主色阶 ---------- */
  --color-navy-950:#050C18;
  --color-navy-900:#081627;
  --color-navy-800:#0C2039;
  --color-navy-700:#102C4E;
  --color-navy-600:#133A63;
  --color-navy-500:#1A4C82;

  /* ---------- 2. 品牌蓝（蓝拓）---------- */
  --color-brand-900:#0A4A72;
  --color-brand-800:#0E5A89;
  --color-brand-700:#1273AE;
  --color-brand-600:#1890D8;
  --color-brand-500:#3FA9E8;
  --color-brand-100:#CFE8F8;
  --color-brand-50:#E8F4FC;

  /* ---------- 3. 树益绿 ---------- */
  --color-shuyi-700:#0A5C22;
  --color-shuyi-600:#0F7B2E;
  --color-shuyi-50:#E9F5EC;

  /* ---------- 4. 金属银 ---------- */
  --color-silver-50:#F7F9FC;
  --color-silver-100:#EDF1F7;
  --color-silver-200:#DDE4EE;
  --color-silver-300:#C4CFDE;
  --color-silver-400:#9FB0C4;
  --color-silver-500:#7C8DA3;

  /* ---------- 5. 中性灰 ---------- */
  --color-gray-50:#F8FAFC;
  --color-gray-100:#F1F5F9;
  --color-gray-200:#E2E8F0;
  --color-gray-300:#CBD5E1;
  --color-gray-400:#94A3B8;   /* 仅装饰，禁止作文字 */
  --color-gray-500:#64748B;
  --color-gray-600:#475569;
  --color-gray-700:#334155;
  --color-gray-800:#1E293B;
  --color-gray-900:#0F172A;

  /* ---------- 6. 语义色 ---------- */
  --color-success:#0F7B3F;  --color-success-bg:#E7F5EC;  --color-success-border:#B7DFC4;
  --color-warning:#B45309;  --color-warning-bg:#FDF3E3;  --color-warning-border:#EFD3A3;
  --color-danger:#C0392B;   --color-danger-bg:#FBEDEB;   --color-danger-border:#EFC0BA;
  --color-info:#1273AE;     --color-info-bg:#E8F4FC;     --color-info-border:#B6DCF3;

  /* ---------- 7. 功能色（组件只引用这一层）---------- */
  --color-bg:#FFFFFF;
  --color-bg-subtle:#F8FAFC;
  --color-surface:#FFFFFF;
  --color-surface-2:#F1F5F9;
  --color-border:#E2E8F0;
  --color-border-strong:#CBD5E1;
  --color-border-dark:rgba(196,207,222,.16);
  --color-text:#1E293B;
  --color-text-strong:#0F172A;
  --color-text-muted:#475569;
  --color-text-placeholder:#64748B;
  --color-text-on-dark:#FFFFFF;
  --color-text-on-dark-muted:#C4CFDE;
  --color-link:#1273AE;
  --color-link-hover:#0E5A89;
  --color-link-on-dark:#3FA9E8;
  --color-focus:#1890D8;
  --color-focus-on-dark:#3FA9E8;
  --color-accent:#1890D8;

  /* ---------- 8. 字体 ---------- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif;
  --font-num:ui-monospace,"SF Mono","DIN Alternate","Bahnschrift","Roboto Condensed","Helvetica Neue",Arial,sans-serif;

  /* ---------- 9. 字号 / 行高 ---------- */
  --fs-hero:56px;   --fs-h1:46px;   --fs-h2:36px;   --fs-h3:28px;   --fs-h4:20px;
  --fs-data:56px;   --fs-lead:18px; --fs-body:16px; --fs-sm:14px;   --fs-caption:13px;
  --fs-kicker:13px; --fs-btn:16px;
  --lh-hero:1.10; --lh-h1:1.15; --lh-h2:1.20; --lh-h3:1.30; --lh-h4:1.45;
  --lh-body:1.75; --lh-sm:1.60; --lh-caption:1.50;
  --ls-hero:-0.015em; --ls-h1:-0.012em; --ls-h2:-0.010em; --ls-h3:-0.005em;
  --ls-body:0.010em;  --ls-sm:0.010em;  --ls-caption:0.015em;
  --ls-kicker:0.16em; --ls-btn:0.020em;

  /* ---------- 10. 间距刻度（4 基数）---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --space-11:160px;

  /* ---------- 11. 容器与栅格 ---------- */
  --container:1200px;
  --container-wide:1320px;
  --container-text:760px;
  --gutter:24px;
  --page-x:32px;
  --grid-cols:12;

  /* ---------- 12. 垂直韵律 ---------- */
  --section-y:96px;
  --section-y-lg:128px;
  --section-head-gap:24px;
  --grid-gap-y:32px;

  /* ---------- 13. 圆角 ---------- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;

  /* ---------- 14. 阴影（三层柔影，克制）---------- */
  --shadow-sm:0 1px 2px rgba(8,22,39,.06), 0 1px 3px rgba(8,22,39,.08);
  --shadow-md:0 4px 12px rgba(8,22,39,.08), 0 2px 4px rgba(8,22,39,.06);
  --shadow-lg:0 16px 40px rgba(8,22,39,.12), 0 4px 12px rgba(8,22,39,.08);
  --shadow-glass:0 8px 32px rgba(5,12,24,.28);

  /* ---------- 15. 动效 ---------- */
  --dur-fast:160ms; --dur-base:240ms; --dur-slow:400ms;
  --dur-count:1200ms; --dur-reveal:600ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.2,.8,.2,1);

  /* ---------- 16. 布局常量 ---------- */
  --header-h:84px;
  --header-h-scrolled:64px;
  --logo-lantuo-h:40px;
  --logo-shuyi-h:44px;
  --z-header:100; --z-drawer:200; --z-backtop:90; --z-skip:999;
}

/* ===================== 平板 768–1199 ===================== */
@media (max-width:1199px){
  :root{
    --fs-hero:44px; --fs-h1:38px; --fs-h2:30px; --fs-h3:24px; --fs-h4:19px;
    --fs-data:44px; --fs-lead:17px;
    --container:100%; --gutter:20px; --page-x:24px;
    --section-y:72px; --section-y-lg:96px; --grid-gap-y:24px;
    --header-h:72px; --header-h-scrolled:60px;
    --logo-lantuo-h:34px; --logo-shuyi-h:38px;
  }
}

/* ===================== 手机 <768 ===================== */
@media (max-width:767px){
  :root{
    --fs-hero:32px; --fs-h1:30px; --fs-h2:24px; --fs-h3:20px; --fs-h4:18px;
    --fs-data:36px; --fs-lead:16px; --fs-body:16px;
    --container:100%; --gutter:16px; --page-x:20px;
    --grid-cols:4;
    --section-y:56px; --section-y-lg:64px; --grid-gap-y:16px;
    --header-h:60px; --header-h-scrolled:56px;
    --logo-lantuo-h:30px; --logo-shuyi-h:32px;
  }
}

/* ===================== 宽屏封顶 ≥1600 ===================== */
@media (min-width:1600px){
  :root{ --container:1200px; --container-wide:1320px; }
}

/* ===================== 无 backdrop-filter 降级 ===================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{ --glass-fallback-light:rgba(255,255,255,.975); --glass-fallback-dark:rgba(5,12,24,.80); }
}

/* ===================== 减少动效 ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}