/* =============================================================
   tokens.css — 设计令牌 (Design Tokens)
   紫丁香环保油墨 / GuangHui Ink
   ============================================================= */

:root {
  /* ---------- 品牌主色：皇家蓝（GuangHui Ink） ---------- */
  --c-blue-900: #0A2A6B;
  --c-blue-800: #103A93;
  --c-blue-700: #1749B8;
  --c-blue-600: #1E5AD6;
  --c-blue-500: #3B78E8;
  --c-blue-300: #9FBEF8;
  --c-blue-050: #EEF4FF;

  /* ---------- 辅助色：青绿（液态丝带） ---------- */
  --c-teal-700: #0B807D;
  --c-teal-600: #0E9E9A;
  --c-teal-500: #14B8B0;
  --c-teal-400: #2ED3C6;
  --c-teal-050: #E6FAF8;

  /* ---------- 品牌点缀：欣光辉金 / 紫丁香李紫 ---------- */
  --c-gold-600: #C88F1C;
  --c-gold-500: #E3A82B;
  --c-gold-400: #F0C452;
  --c-gold-050: #FDF5E4;
  --c-plum-700: #4A2350;
  --c-plum-600: #7A3B8F;
  --c-plum-400: #B06FC4;
  --c-plum-050: #F6EFF9;

  /* ---------- 中性色 ---------- */
  --c-ink-900: #14213D;
  --c-ink-800: #1F2E4D;
  --c-ink-700: #33415C;
  --c-ink-600: #465873;
  --c-ink-500: #5C6B85;
  --c-ink-400: #7C8AA0;
  --c-ink-300: #A6B2C4;
  --c-line: #E3E9F2;
  --c-line-strong: #CFD9E8;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F5F8FC;
  --c-bg-mist: #EDF2F9;
  --c-bg-cream: #FAF7F0;

  /* ---------- 语义色 ---------- */
  --c-success: #1F9D55;
  --c-warn: #D9822B;
  --c-danger: #D64545;

  /* ---------- 渐变 ---------- */
  --grad-brand: linear-gradient(120deg, #1E5AD6 0%, #14B8B0 100%);
  --grad-brand-rev: linear-gradient(120deg, #14B8B0 0%, #1E5AD6 100%);
  --grad-soft: linear-gradient(160deg, #EEF4FF 0%, #E6FAF8 100%);
  --grad-dark: linear-gradient(150deg, #0A2A6B 0%, #12376F 45%, #0E7C86 105%);
  --grad-gold: linear-gradient(120deg, #F0C452 0%, #E3A82B 100%);

  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* 字号（流体） */
  --fs-display: clamp(34px, 5.4vw, 62px);
  --fs-h1: clamp(30px, 4.2vw, 48px);
  --fs-h2: clamp(25px, 3.2vw, 38px);
  --fs-h3: clamp(20px, 2.2vw, 26px);
  --fs-h4: clamp(17px, 1.6vw, 20px);
  --fs-lead: clamp(16px, 1.5vw, 19px);
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;

  --lh-tight: 1.18;
  --lh-snug: 1.36;
  --lh-base: 1.75;

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

  --ls-tight: -0.015em;
  --ls-wide: 0.06em;
  --ls-wider: 0.14em;

  /* ---------- 间距（4 基准） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;
  --sp-10: 120px;

  /* ---------- 圆角 ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 2px rgba(20, 33, 61, .06), 0 1px 1px rgba(20, 33, 61, .04);
  --sh-2: 0 6px 22px rgba(20, 33, 61, .09);
  --sh-3: 0 18px 48px rgba(20, 33, 61, .13);
  --sh-4: 0 28px 70px rgba(10, 42, 107, .20);
  --sh-focus: 0 0 0 3px rgba(30, 90, 214, .28);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;

  /* ---------- 布局 ---------- */
  --container: 1220px;
  --container-header: 1340px; /* 页头使用略宽的容器，避免英文长文案挤压 */
  --container-narrow: 920px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 76px;
  --header-h-sm: 64px;
}

/* 断点参考（CSS 自定义属性不能用于 @media，仅作文档）
   sm: 480px   md: 768px   lg: 1024px   xl: 1280px   2xl: 1440px */