/**
 * ╔════════════════════════════════════════════════════════════╗
 * ║  CALINK — Design System CSS                                ║
 * ║  CALINK — Intelligent Coffee Roaster                       ║
 * ║  Premium Intelligent Hardware                              ║
 * ║  定位：Coffee + Engineering + AI + B2B                     ║
 * ║  设计哲学：Surprising Restraint（惊喜的克制）                ║
 * ╚════════════════════════════════════════════════════════════╝
 */

/* ────────────────────────────────────────────────────────────
 * 1. CSS 自定义属性（主题令牌）
 * ──────────────────────────────────────────────────────────── */
:root {
  /* ---------- CALINK V1.1 单色硬件色系 ---------- */
  --calink-white: #FFFFFF;
  --calink-soft-white: #FAFAFA;
  --calink-soft-gray: #F5F5F7;
  --calink-silver: #ECEDEF;
  --calink-silver-dark: #D9DBDE;
  --calink-graphite: #1D1D1F;
  --calink-near-black: #101010;
  --calink-black: #000000;

  /* ---------- 文字色 ---------- */
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;
  --text-inverse: #F5F5F7;

  /* ---------- 品牌主色（CALINK 红 — 仅品牌与核心 CTA） ---------- */
  --color-primary: #FF3B30;
  --calink-red: #FF3B30;
  --calink-red-hover: #E9352B;
  --color-primary-50: #FFF1F0;
  --color-primary-100: #FFDDD9;
  --color-primary-200: #FFC0BA;
  --color-primary-300: #FF9A90;
  --color-primary-400: #FF6B5E;
  --color-primary-500: #FF3B30;
  --color-primary-600: #E9352B;
  --color-primary-700: #C22A22;
  --color-primary-800: #9C221B;
  --color-primary-900: #751A15;

  /* ---------- 辅助色（钛银灰 — 中性） ---------- */
  --color-accent: #86868B;
  --color-accent-50: #F5F5F7;
  --color-accent-100: #ECEDEF;
  --color-accent-200: #E2E3E6;
  --color-accent-300: #D9DBDE;
  --color-accent-400: #B9BCC1;
  --color-accent-500: #86868B;
  --color-accent-600: #6E6E73;
  --color-accent-700: #55555A;
  --color-accent-800: #3A3A3E;
  --color-accent-900: #262628;

  /* ---------- 背景 / 表面（浅色主体） ---------- */
  --color-bg: #FFFFFF;            /* 纯白（主背景） */
  --color-bg-alt: #F5F5F7;        /* Soft Gray（次表面） */
  --color-bg-cool: #ECEDEF;       /* Silver（冷色面板） */
  --color-white: #FFFFFF;

  /* ---------- 语义文字（映射） ---------- */
  --color-text: #1D1D1F;          /* 主文字 Graphite */
  --color-text-muted: #6E6E73;    /* 次文字 */
  --color-text-inverse: #FFFFFF;  /* 深色背景上的文字 */
  --color-text-link: #FF3B30;     /* 链接文字 */

  /* ---------- 点缀色 ---------- */
  --color-neon: #3DD6FF;          /* AI Cyan（仅 AI / 数据 / Roast Curve） */
  --ai-cyan: #3DD6FF;
  --ai-blue: #4DA3FF;             /* AI Blue，极少量 */
  --color-neon-50: #EBFAFF;
  --color-neon-400: #3DD6FF;
  --color-neon-600: #0EA5C4;
  --color-forest: #1F9D66;        /* 成功绿 */
  --color-forest-50: #ECFDF5;
  --color-forest-400: #34D399;
  --color-forest-600: #1F9D66;
  --color-deep-space: #101010;    /* 深色时刻（AI / Final CTA） */
  --color-indigo: #6366F1;        /* 备用 */
  --color-indigo-50: #EEF2FF;
  --color-indigo-400: #818CF8;
  --color-indigo-600: #4F46E5;
  --color-error: #EF4444;         /* 错误红 */
  --color-error-50: #FEF2F2;
  --color-error-400: #F87171;
  --color-error-600: #DC2626;
  --color-warning: #F59E0B;       /* 警告色 */
  --color-info: #3B82F6;          /* 信息色 */

  /* ---------- 边框 / 分割（浅色场景） ---------- */
  --color-border: rgba(0, 0, 0, 0.08);        /* 浅边框 */
  --color-border-light: rgba(0, 0, 0, 0.05);
  --color-divider: rgba(0, 0, 0, 0.08);

  /* ---------- 透明度变体 ---------- */
  --color-primary-10: rgba(255, 59, 48, 0.10);
  --color-primary-20: rgba(255, 59, 48, 0.20);
  --color-primary-30: rgba(255, 59, 48, 0.30);
  --color-primary-50-alpha: rgba(255, 59, 48, 0.50);
  --color-primary-80: rgba(255, 59, 48, 0.80);
  --color-accent-10: rgba(134, 134, 139, 0.10);
  --color-accent-20: rgba(134, 134, 139, 0.20);
  --color-accent-50-alpha: rgba(134, 134, 139, 0.50);
  --color-neon-10: rgba(61, 214, 255, 0.10);
  --color-neon-20: rgba(61, 214, 255, 0.20);
  --color-neon-50-alpha: rgba(61, 214, 255, 0.50);
  --color-black-10: rgba(0, 0, 0, 0.10);
  --color-black-20: rgba(0, 0, 0, 0.20);
  --color-black-30: rgba(0, 0, 0, 0.30);
  --color-black-50: rgba(0, 0, 0, 0.50);
  --color-black-70: rgba(0, 0, 0, 0.70);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-50: rgba(255, 255, 255, 0.50);
  --color-white-80: rgba(255, 255, 255, 0.80);

  /* ── 字体系统 ── */
  /* V1.1 Typography：仅 Inter + IBM Plex Mono（SIL OFL 1.1，Google Fonts CDN） */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-accent: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;

  --font-size-2xs: 0.625rem;   /* 10px */
  --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.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3rem;       /* 48px */
  --font-size-5xl: 4rem;       /* 64px */

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

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 2;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.2em;

  /* ── 间距系统（8px 基线） ── */
  --space-3xs: 0.125rem;  /* 2px */
  --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: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ── 圆角系统 ── */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-3xl: 2rem;     /* 32px */
  --radius-full: 9999px;

  /* ── 阴影系统 ── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgba(34, 211, 238, 0.30);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-none: none;

  /* ── Z-Index 层级 ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ── 过渡预设 ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 容器 ── */
  --container-max: 1280px;
  --container-padding: var(--space-md);  /* 16px mobile */
  --container-padding-lg: var(--space-xl); /* 32px desktop */

  /* ── 其他 ── */
  --header-height: 64px;
  --header-height-scrolled: 64px;
  --sidebar-width: 280px;

  /* ── Section Rhythm Tokens (V1.6.1 — for Visual Design V2) ──
     取值依据：全站高频 inline style 众数统计（HTML 代理并行处理中，本轮不替换 inline） */
  --section-space-xl: var(--space-5xl);   /* 首页主节奏：padding: var(--space-5xl) 0 约 11 处 */
  --section-space-lg: var(--space-4xl);   /* 最高频：padding: var(--space-4xl) 0 约 14 处 */
  --section-space-md: var(--space-3xl);   /* 次级节奏：--space-3xl 复合用法 */
  --content-max: 1280px;                  /* = --container-max（现有容器宽） */
  --copy-max: 760px;                      /* section-desc 正文段 max-width 众数（company.html 9 处） */
  --editorial-gap: 64px;                  /* 图文分栏 gap: 64px 众数（约 12 处） */
  --media-radius: var(--radius-lg);       /* 12px：媒体圆角众数（mega-media img / calink.css:1211） */
  --section-heading-max: 760px;           /* 章节标题/描述 max-width 众数（company.html 760px） */

  /* ── Motion Tokens (V1.7 — Motion & Premium Experience System) ──
     全站动效统一走这套令牌，禁止在页面局部写随机时长（317ms/630ms/810ms 等）。 */
  --motion-fast: 180ms;       /* 微交互 / Mega Menu 开合 */
  --motion-micro: 280ms;      /* Micro Hover（250–400ms 区间） */
  --motion-base: 420ms;       /* 默认过渡 */
  --motion-reveal: 620ms;     /* Editorial Reveal（500–700ms 区间） */
  --motion-slow: 700ms;       /* Image Reveal / Slow Drift */
  --motion-hero: 1000ms;      /* Hero 初次载入（900–1200ms 区间） */

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);    /* 克制 smooth，无弹性无 overshoot */
  --ease-standard: cubic-bezier(0.25, 1, 0.5, 1);      /* 通用（quart） */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* clip-path 图片揭示 */
}

/* ────────────────────────────────────────────────────────────
 * 1b. CALINK V2 DESIGN TOKENS（F04 — 只新增，不覆盖 V1 变量）
 *     命名一律以 --v2- 前缀隔离；旧变量保持不变。
 *     应用范围：F05–F11 逐页施工；本轮仅建立 Token 与验收样板。
 * ──────────────────────────────────────────────────────────── */
:root {
  /* Deep technology: backgrounds evolve subtly, not hard-cut */
  --v2-dark-base: #0D0F14;
  --v2-dark-raised: #121722;
  --v2-dark-mid: #19202B;
  --v2-org-base: #0B0D13;
  --v2-dark-card: #171C26;
  --v2-dark-text: #F5F6F7;
  --v2-dark-muted: #B9C1CB;
  --v2-dark-border: rgba(237, 244, 255, .12);

  /* Light and origin have separate editorial identities */
  --v2-light-base: #F8F9FA;
  --v2-light-raised: #F2F4F5;
  --v2-light-text: #1B1F24;
  --v2-light-muted: #59616C;
  --v2-light-border: rgba(27, 31, 36, .12);
  --v2-origin-base: #F7F3EC;
  --v2-origin-raised: #F2EEE8;

  /* Unified approved global chrome: do not restyle Header/Footer here */
  --v2-nav-bg: rgba(9, 11, 16, .94);
  --v2-mega-bg: rgba(15, 19, 28, .94);
  --v2-footer-base: #090B10;
  --v2-glow-blue: rgba(76, 99, 151, .15);
  --v2-glow-violet: rgba(106, 76, 142, .09);

  /* No new unofficial logo red: preserve the existing brand token */
  --v2-brand-red: var(--calink-red, #FF3B30);

  --v2-container-max: 1280px;
  --v2-gutter-desktop: 64px;
  --v2-gutter-tablet: 32px;
  --v2-gutter-mobile: 20px;
  --v2-section-desktop: 128px;
  --v2-section-tablet: 88px;
  --v2-section-mobile: 64px;
  --v2-copy-max: 620px;
  --v2-font-body: var(--font-body, 'Inter', sans-serif);
  --v2-font-mono: var(--font-mono, 'IBM Plex Mono', monospace);
  --v2-h1-desktop: 80px;
  --v2-h2-desktop: 52px;
  --v2-body-desktop: 17px;
  --v2-body-mobile: 16px;
  --v2-eyebrow-size: 11px;
  --v2-button-height: 48px;
  --v2-card-radius: 24px;
  --v2-panel-radius: 20px;

  --v2-motion-hover: 200ms;
  --v2-motion-reveal: 680ms;
  --v2-motion-stagger: 100ms;
  --v2-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ────────────────────────────────────────────────────────────
 * 2. 字体加载（SELF-HOST — Owner Decision locked 2026-10-02）
 *    远程 Google Fonts @import 已移除；@font-face 见 css/fonts.css，
 *    由 <link rel="stylesheet" href="css/fonts.css"> 先于本文件加载。
 * ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
 * 3. CSS Reset（温和重置，保留有用默认）
 * ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Heading ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-4xl); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

/* ---------- Paragraph ---------- */
p {
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

/* ---------- Link ---------- */
a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-primary-400);
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Button ---------- */
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  appearance: none;
}

button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- List ---------- */
ul, ol {
  list-style: none;
  padding: 0;
}

li {
  list-style: none;
}

/* ---------- Image / Media ---------- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  object-fit: cover;
}

/* ---------- Form ---------- */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-10);
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ---------- Table ---------- */
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

th {
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
}

/* ────────────────────────────────────────────────────────────
 * 4. 字体工具类
 * ──────────────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }
.font-accent { font-family: var(--font-accent); }
.font-mono { font-family: var(--font-mono); }

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-black { font-weight: var(--font-weight-black); }

/* ────────────────────────────────────────────────────────────
 * 5. 颜色工具类
 * ──────────────────────────────────────────────────────────── */
.color-primary { color: var(--color-primary); }
.color-accent { color: var(--color-accent); }
.color-text { color: var(--color-text); }
.color-text-muted { color: var(--color-text-muted); }
.color-text-inverse { color: var(--color-text-inverse); }
.color-neon { color: var(--color-neon); }
.color-forest { color: var(--color-forest); }
.color-error { color: var(--color-error); }
.color-white { color: var(--color-white); }

.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-bg { background-color: var(--color-bg); }
.bg-bg-alt { background-color: var(--color-bg-alt); }
.bg-bg-cool { background-color: var(--color-bg-cool); }
.bg-white { background-color: var(--color-white); }
.bg-deep-space { background-color: var(--color-deep-space); }
.bg-neon-10 { background-color: var(--color-neon-10); }
.bg-accent-10 { background-color: var(--color-accent-10); }
.bg-primary-10 { background-color: var(--color-primary-10); }
.bg-forest-50 { background-color: var(--color-forest-50); }
.bg-error-50 { background-color: var(--color-error-50); }

/* ────────────────────────────────────────────────────────────
 * 6. 间距工具类
 * ──────────────────────────────────────────────────────────── */
.space-3xs { padding: var(--space-3xs); }
.space-2xs { padding: var(--space-2xs); }
.space-xs { padding: var(--space-xs); }
.space-sm { padding: var(--space-sm); }
.space-md { padding: var(--space-md); }
.space-lg { padding: var(--space-lg); }
.space-xl { padding: var(--space-xl); }
.space-2xl { padding: var(--space-2xl); }
.space-3xl { padding: var(--space-3xl); }
.space-4xl { padding: var(--space-4xl); }
.space-5xl { padding: var(--space-5xl); }

.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }
.gap-5xl { gap: var(--space-5xl); }

/* ────────────────────────────────────────────────────────────
 * 7. 圆角工具类
 * ──────────────────────────────────────────────────────────── */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-2xl { border-radius: var(--radius-2xl); }
.radius-3xl { border-radius: var(--radius-3xl); }
.radius-full { border-radius: var(--radius-full); }

/* ────────────────────────────────────────────────────────────
 * 8. 阴影工具类
 * ──────────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-none { box-shadow: var(--shadow-none); }

/* ────────────────────────────────────────────────────────────
 * 9. 容器工具类
 * ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
  }
}

.container-fluid {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (min-width: 1024px) {
  .container-fluid {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
  }
}

/* ────────────────────────────────────────────────────────────
 * 10. 布局工具类
 * ──────────────────────────────────────────────────────────── */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ────────────────────────────────────────────────────────────
 * 11. 按钮组件基础样式
 * ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-accent);
  font-weight: var(--font-weight-medium);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary-10);
  transform: translateY(-2px);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.btn-accent:hover {
  background-color: var(--color-accent-400);
  border-color: var(--color-accent-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-dark {
  background-color: var(--color-deep-space);
  color: var(--color-text-inverse);
  border-color: var(--color-deep-space);
}

.btn-dark:hover {
  background-color: var(--color-black-70);
  border-color: var(--color-black-70);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-ghost:hover {
  background-color: var(--color-bg-alt);
  border-color: var(--color-text-muted);
}

.btn-sm {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
}

.btn-full {
  width: 100%;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
 * 12. 卡片组件基础样式
 * ──────────────────────────────────────────────────────────── */
.card {
  background-color: #FFFFFF;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-body {
  padding: var(--space-lg);
}

/* ────────────────────────────────────────────────────────────
 * 13. 徽章/标签组件
 * ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-accent);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.badge-primary { background-color: var(--color-primary-10); color: var(--color-primary); }
.badge-accent { background-color: var(--color-accent-10); color: var(--color-accent-600); }
.badge-neon { background-color: var(--color-neon-10); color: var(--color-neon-600); }
.badge-forest { background-color: var(--color-forest-50); color: var(--color-forest-600); }
.badge-error { background-color: var(--color-error-50); color: var(--color-error-600); }
.badge-dark { background-color: var(--color-deep-space); color: var(--color-white); }

/* ────────────────────────────────────────────────────────────
 * 14. 分割线
 * ──────────────────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-divider);
  border: none;
  margin: var(--space-lg) 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  min-height: 1rem;
  background-color: var(--color-divider);
}

/* ────────────────────────────────────────────────────────────
 * 15. 响应式断点（作为参考，实际媒体查询在下方）
 * ──────────────────────────────────────────────────────────── */
/*
  sm: 640px
  md: 768px
  lg: 1024px
  xl: 1280px
  2xl: 1536px
*/

/* ────────────────────────────────────────────────────────────
 * 16. 响应式工具类
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .hidden-sm { display: none !important; }
  .container { --container-padding: var(--space-sm); }
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
}

@media (min-width: 640px) {
  .hidden-sm-up { display: none !important; }
}

@media (max-width: 767px) {
  .hidden-md { display: none !important; }
}

@media (min-width: 768px) {
  .hidden-md-up { display: none !important; }
  .flex-md-row { flex-direction: row; }
  .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px) {
  .hidden-lg { display: none !important; }
}

@media (min-width: 1024px) {
  .hidden-lg-up { display: none !important; }
  .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-lg-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 1279px) {
  .hidden-xl { display: none !important; }
}

@media (min-width: 1280px) {
  .hidden-xl-up { display: none !important; }
  .grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-xl-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-xl-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 1535px) {
  .hidden-2xl { display: none !important; }
}

@media (min-width: 1536px) {
  .hidden-2xl-up { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
 * 17. prefers-reduced-motion 支持
 * ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────
 * 18. 打印样式
 * ──────────────────────────────────────────────────────────── */
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
  a {
    text-decoration: underline;
    color: black;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ============================================================
 * CALINK GLOBAL VISUAL SYSTEM V1 — T1 semantic aliases
 * PROPOSAL (VD-03/04/05) — pending Owner visual approval.
 * Aliases only: every name below is NEW, nothing existing is redefined,
 * and each one resolves to an established token wherever one serves the role.
 * ============================================================ */
:root {
  /* -- colour: warm editorial ground; ink/muted/line alias existing values -- */
  --calink-canvas: #F6F5F2;                        /* new: warm-neutral page ground */
  --calink-soft: #ECECE9;                          /* new: subtle warm section step */
  --calink-ink: var(--calink-graphite);            /* alias #1D1D1F — NOT a new ink */
  --calink-muted: var(--text-secondary);           /* alias #6E6E73 */
  --calink-line: #E4E2DD;                          /* new: warm hairline, replaces pure-grey borders */
  --calink-night: var(--calink-near-black);        /* alias #101010 */

  /* -- type roles (semantic, not per-page sizes) -- */
  --calink-type-display: clamp(2.625rem, 5.4vw, 5.25rem);   /* 42 → 84 */
  --calink-type-page-title: clamp(2.125rem, 4vw, 3.75rem);  /* 34 → 60 */
  --calink-type-section: clamp(1.75rem, 3vw, 2.875rem);     /* 28 → 46 */
  --calink-type-sub: clamp(1.25rem, 1.7vw, 1.625rem);       /* 20 → 26 */
  --calink-type-lead: clamp(1.0625rem, 1.25vw, 1.1875rem);  /* 17 → 19 */
  --calink-type-body: 1rem;
  --calink-type-label: 0.75rem;

  --calink-leading-display: 1.06;
  --calink-leading-section: 1.13;
  --calink-leading-body: 1.6;

  /* -- measure: one reading column, replacing the six ad-hoc widths -- */
  --calink-measure-reading: 62ch;
  --calink-measure-lead: 54ch;

  /* -- vertical rhythm: three deliberate densities -- */
  --calink-space-feature: clamp(72px, 9vw, 136px);
  --calink-space-standard: clamp(60px, 6.5vw, 104px);
  --calink-space-compact: clamp(44px, 4.5vw, 72px);

  /* -- media -- */
  --calink-media-radius: 10px;
  --calink-stage-radius: 4px;                      /* product stage: near-square framing */
}