/*! ============================================================================
 *  Polo Design Tokens  v1.0
 *  ----------------------------------------------------------------------------
 *  提炼自：Polo – Multipurpose HTML5 Template v5.9.9（ThemeForest / Inspiro Themes）
 *  真值来源：tools/src/scss/_variables.scss + Template/css/style.css（编译产物）
 *
 *  用途：跨项目复用的设计令牌层。新项目直接引入本文件，即可用 var(--token)
 *        获得与原模板一致的视觉基线，无需搬运 40 万行 CSS。
 *
 *  用法：<link rel="stylesheet" href="design-tokens.css">
 *
 *  ⚠️ 单位约定
 *  原模板以 `html { font-size: 88% }`（= 14.08px）为根字号，全部 rem 值依赖它。
 *  本文件已把所有 rem 换算为**等值 px**（按 root = 14.08px），因此不依赖根字号、
 *  拷贝即用。注释中的 `0.42rem` 即原始写法，便于回溯。
 * ========================================================================== */

:root {

  /* ══════════════════════════════════════════════════════════════════════
   *  1. 品牌色  —  换肤只需改这一组（见 DESIGN_SPEC.md § 8 换肤）
   * ══════════════════════════════════════════════════════════════════════ */
  --color-primary:          #2B4AE0;   /* AIEER 电光蓝（原模板 $theme 位；HSL 亮度 52.35%） */
  --color-primary-hover:    #1C37BC;   /* darken(品牌色, 10%)，按钮 hover */
  --color-primary-active:   #152A90;   /* darken(品牌色, 20%)，按下态 */
  --color-primary-soft:     #1A35B4;   /* darken(品牌色, 12%)，浅底上的强调文字 */
  --color-primary-contrast: #ffffff;   /* 主色上的文字色 */
  --color-primary-rgb:      43 74 224;  /* --color-primary 的 RGB 三元组，供 rgb(var(--color-primary-rgb) / α) 使用，
                                          避免在阴影等处硬编码品牌色值 */
  --color-primary-tint:     #EEF1FD;   /* 品牌色 8% 铺白，用于浅底强调块（等价 color-mix(primary 8%, white)） */

  /* 备用主题色（原 theme.css 覆盖层）：紫 #7341B4 — 见 DESIGN_SPEC.md § 8.2 */

  /* ══════════════════════════════════════════════════════════════════════
   *  2. 中性阶  —  8 阶，覆盖底/边/字/深底全部场景
   * ══════════════════════════════════════════════════════════════════════ */
  --color-white:      #ffffff;
  --color-gray-100:   #fbfbfb;   /* 页面浅底 / 页面标题条底色 */
  --color-gray-200:   #f9f9fa;   /* 区块灰底 / 页脚底色  ← .background-grey */
  --color-gray-300:   #e4e6ef;   /* 边框线 / 分隔线     ← 全局 border-color */
  --color-gray-400:   #d0d3db;
  --color-gray-500:   #c1c3ce;   /* secondary 次要色 */
  --color-gray-600:   #9aa0a6;   /* 弱化文字 muted / placeholder */
  --color-gray-700:   #2e2e2e;
  --color-gray-800:   #2e2e2e;
  --color-gray-900:   #1e2022;   /* 标题色 / 深色底 */
  --color-black:      #000000;

  /* ══════════════════════════════════════════════════════════════════════
   *  3. 语义色  —  状态反馈，各配 soft 浅底
   * ══════════════════════════════════════════════════════════════════════ */
  --color-success:  #28a745;
  --color-info:     #17a2b8;
  --color-warning:  #ffc107;
  --color-danger:   #dc3545;

  /* 品牌 / 社交色（按需取用，勿混用为语义色） */
  --color-facebook: #1877f2;
  --color-twitter:  #1da1f2;
  --color-youtube:  #ff0000;
  --color-instagram:#c32aa3;
  --color-linkedin: #007bb5;
  --color-pinterest:#bd081c;
  --color-tiktok:   #010101;
  --color-dribbble: #ea4c89;
  --color-github:   #222222;
  --color-slack:    #4a154b;

  /* ══════════════════════════════════════════════════════════════════════
   *  4. 语义化颜色别名  —  写业务样式时优先用这一组，换肤零改动
   * ══════════════════════════════════════════════════════════════════════ */
  --color-text:            #3c4043;   /* 正文 */
  --color-text-heading:    #1e2022;   /* 标题 */
  --color-text-muted:      #9aa0a6;   /* 辅助文字 */
  --color-text-nav:        #7e8299;   /* 导航默认链接 */
  --color-text-light:      #ffffff;   /* 深底上的文字 */

  --color-bg:              #ffffff;   /* 页面底 */
  --color-bg-light:        #fbfbfb;   /* 浅底（gray-100） */
  --color-bg-muted:        #f9f9fa;   /* 灰底（gray-200） */
  --color-bg-dark:         #1e2022;   /* 深底（gray-900） */

  --color-border:          #e4e6ef;

  --color-link:            var(--color-primary);
  --color-link-hover:      var(--color-primary-hover);

  /* ══════════════════════════════════════════════════════════════════════
   *  5. 字体
   * ══════════════════════════════════════════════════════════════════════ */
  /* 西文 Poppins（自托管，见 webfonts/poppins/）；CJK 走系统字体栈
     —— @font-face 在 aieer.css 中声明 */
  --font-sans:    "Poppins", -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script:  "Dancing Script", cursive;                 /* .font-pacifico */
  --font-marker:  "Nothing You Could Do", cursive;           /* 手写体 */
  --font-serif-cursive: "Parisienne", cursive;
  --font-icon:    "inspiro-icons";                           /* 模板图标字体 */
  --font-icon-fa: "Font Awesome 5 Free";

  /* 字重 — 原模板语义与常规 100-900 不同，注意对应关系 */
  --fw-thin:       100;
  --fw-light:      300;   /* $font-weight-light */
  --fw-normal:     400;
  --fw-medium:     500;   /* 原命名 semi-bold */
  --fw-semibold:   600;   /* 原命名 bold      ← 标题 / 按钮 / 加粗正文 */
  --fw-bold:       700;   /* 原命名 bolder */

  /* ══════════════════════════════════════════════════════════════════════
   *  6. 字阶  —  正文 14px 为基准
   * ══════════════════════════════════════════════════════════════════════ */
  --fs-xs:     11px;   /* 0.75rem */
  --fs-sm:     12px;   /* 0.875rem — 按钮 / 导航 / 页脚标题 */
  --fs-base:   14px;   /* 1rem     — 正文 */
  --fs-md:     15px;
  --fs-lg:     18px;   /* 1.25rem  — 引导语 / 区块描述 */
  --fs-xl:     21px;   /* 1.5rem */
  --fs-2xl:    24px;
  --fs-3xl:    30px;

  /* 标题字阶（em 相对值 → 等值 px，按 root 14.08px 换算） */
  --fs-h1:     44.2px;   /* 3.14285714em */
  --fs-h2:     33.2px;   /* 2.35714286em */
  --fs-h3:     25.1px;   /* 1.78571429em */
  --fs-h4:     19.1px;   /* 1.35714286em */
  --fs-h5:     14.1px;   /* 1em */
  --fs-h6:     12.1px;   /* 0.85714286em */

  /* 板块大标题（.heading-text.heading-section） */
  --fs-section-title: 48px;
  --fs-page-title:    35px;   /* #page-title h1 = 2.5rem */

  /* 行高 — 标题用「乘自身字号」，正文用倍数 */
  --lh-tight:    1.31818182;   /* h1 */
  --lh-heading:  1.5;          /* h3 */
  --lh-body:     1.7;          /* p */
  --lh-base:     1.65714286;   /* body */
  --lh-loose:    1.85714286;   /* h5 */
  --lh-loose-xl: 2.16666667;   /* h6 */

  --ls-heading:  0.5px;   /* 所有标题统一字距 */
  --ls-button:   0.5px;
  --ls-nav:      0.6px;
  --ls-wide:     2px;     /* .btn-lg */

  /* ══════════════════════════════════════════════════════════════════════
   *  7. 间距  —  等比数列，源自 $spacer: 1rem
   * ══════════════════════════════════════════════════════════════════════ */
  --space-0:  0;
  --space-1:  4px;    /* 0.25rem */
  --space-2:  7px;    /* 0.5rem  */
  --space-3:  14px;   /* 1rem   ← 基准 */
  --space-4:  21px;   /* 1.5rem */
  --space-5:  42px;   /* 3rem   */
  --space-6:  63px;   /* 4.5rem */
  --space-7:  77px;   /* 5.5rem */
  --space-8:  99px;   /* 7rem   */
  --space-9:  127px;  /* 9rem   */
  --space-10: 141px;  /* 10rem  */

  /* 布局级间距 */
  --section-padding-y:  84px;   /* section 上下内边距（= 6rem），≤768px 降为 40px */
  --page-title-padding: 80px;   /* #page-title 上下内边距 */
  --header-height:      80px;
  --container-padding-x: 14px;  /* 容器左右内边距（= gutter/2）；≤992px 为 30px */
  --grid-gutter:        28px;   /* 栅格列间距（= 2rem） */
  --heading-gap:        30px;   /* .heading-text 内标题与描述的间距 */

  /* ══════════════════════════════════════════════════════════════════════
   *  8. 圆角  —  小圆角体系，克制使用
   * ══════════════════════════════════════════════════════════════════════ */
  --radius-xs:   3px;    /* 0.2rem   */
  --radius-sm:   5px;    /* 0.375rem — 徽标 / 分页 */
  --radius-base: 6px;    /* 0.42rem  ← 主圆角：按钮 / 卡片 / 输入框 */
  --radius-lg:   14px;   /* 1rem     */
  --radius-xl:   17px;   /* 1.2rem   */
  --radius-pill: 9999px; /* 胶囊：≥2em，用于 .btn-rounded / 标签 */
  --radius-circle: 50%;  /* 头像 / 圆形图标 */

  /* ══════════════════════════════════════════════════════════════════════
   *  9. 阴影  —  低对比、扩散型，不抢内容
   * ══════════════════════════════════════════════════════════════════════ */
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-card:  0 0 18px rgba(31, 45, 61, 0.05);      /* 卡片默认 */
  --shadow-base:  0 6px 12px rgba(140, 152, 164, 0.075);
  --shadow-post:  0 5px 15px rgba(0, 0, 0, 0.05);
  --shadow-pop:   0 9px 35px 9px rgba(140, 152, 164, 0.175);  /* 下拉菜单 */
  --shadow-lg:    0 14px 42px rgba(0, 0, 0, 0.175);
  --shadow-xl:    0 21px 56px rgba(0, 0, 0, 0.175);
  --shadow-btn:   0 4px 16px #efefef;                   /* .btn-shadow */
  --shadow-btn-hover: 4px 8px 16px #dedede;
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* ══════════════════════════════════════════════════════════════════════
   * 10. 动效
   * ══════════════════════════════════════════════════════════════════════ */
  --duration-fast:   0.15s;   /* 表单 / 链接 / 分页 */
  --duration-base:   0.2s;    /* 全局 $transition-base */
  --duration-slow:   0.3s;    /* 按钮 / 模态 */
  --duration-slower: 0.4s;    /* .btn-slide */
  --ease-base:       ease;
  --ease-in-out:     ease-in-out;
  --ease-out-back:   cubic-bezier(0.77, 0, 0.2, 2.25);   /* 弹性回弹 */
  --transition-base: all 0.2s ease;
  --transition-btn:  all 0.3s;

  /* ══════════════════════════════════════════════════════════════════════
   * 11. 层级  —  固定 6 层，禁止随意造 z-index
   * ══════════════════════════════════════════════════════════════════════ */
  --z-base:     1;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 1000;
  --z-overlay:  1040;
  --z-modal:    1050;
  --z-toast:    1090;

  /* ══════════════════════════════════════════════════════════════════════
   * 12. 断点（供 JS / 文档参考；CSS 媒体查询不认 var()，需硬写）
   *     sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
   * ══════════════════════════════════════════════════════════════════════ */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1141px;
}