/* ============================================================
   澄图 ChengTu · Design Tokens
   合同 CT-REDESIGN-2026-001 · PHASE 1
   设计语言：Instagram Editorial × Swiss Grid × Apple HIG
   暖白 70% / 深色文字 20% / 蓝色强调 10%
   ============================================================ */
:root {
  /* ---- 表面 / 背景 ---- */
  --ct-bg: #FAFAF8;
  --ct-surface: #FFFFFF;
  --ct-surface-soft: #F5F6F8;
  --ct-surface-muted: #EFF2F7;
  --ct-surface-ink: #17181C;          /* 深色胶囊 / 摄影横幅底 */

  /* ---- 文字 ---- */
  --ct-ink: #182033;
  --ct-heading: #17213A;
  --ct-text: #313A4D;
  /* PHASE 5：次级/三级文字加深，满足 WCAG 2.2 AA（≥4.5:1 on #FFF / #F5F6F8） */
  --ct-text-secondary: #5B6478;       /* on #FFF ≈ 5.9:1 */
  --ct-text-tertiary: #69707F;        /* on #FFF ≈ 5.0:1 */
  --ct-on-ink: #FFFFFF;

  /* ---- 强调 / 功能色 ---- */
  --ct-accent: #4F7FE8;
  --ct-accent-hover: #366AE0;
  --ct-accent-soft: #EBF1FF;
  --ct-success: #2FAE7A;
  --ct-success-soft: #E8F7F0;
  --ct-danger: #E34D4A;
  --ct-danger-soft: #FDECEB;
  --ct-warning: #C78C32;
  --ct-warning-soft: #FBF3E4;

  /* ---- 描边 ---- */
  --ct-border: #E7EAF0;
  --ct-border-strong: #D7DFEA;

  /* ---- 圆角 ---- */
  --ct-radius-xs: 8px;
  --ct-radius-sm: 12px;
  --ct-radius-md: 16px;
  --ct-radius-lg: 22px;
  --ct-radius-xl: 28px;
  --ct-radius-pill: 999px;

  /* ---- 阴影（仅两档，克制） ---- */
  --ct-shadow-soft: 0 4px 22px rgba(20, 31, 55, 0.045);
  --ct-shadow-floating: 0 10px 34px rgba(20, 31, 55, 0.09);

  /* ---- 间距 ---- */
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 20px;
  --ct-space-6: 24px;
  --ct-space-8: 32px;
  --ct-space-10: 40px;
  --ct-space-12: 48px;
  --ct-space-16: 64px;

  /* ---- 页面栅格 ---- */
  --ct-page-max: 1200px;         /* 内容最大宽度，不无限拉宽 */
  --ct-page-pad: 20px;           /* 移动端左右内边距 */
  --ct-tool-max: 1120px;         /* 工具编辑区最大宽度 */
  /* 首页统一内容边界：Hero 文案 / 工具画廊 / 摄影横幅 / 对比区 / 页脚共用同一条左右边线。
     Hero 的摄影层可以独立出血，但文字与所有区块必须落在这个栅格里。 */
  --ct-home-max-width: var(--ct-page-max);

  /* ---- 动效 ---- */
  --ct-ease: cubic-bezier(.32, .72, .28, 1);
  --ct-dur-fast: 150ms;
  --ct-dur: 190ms;
  --ct-dur-slow: 220ms;

  /* ---- 字体 ---- */
  --ct-font: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei",
             "SF Pro Display", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ct-font-serif: "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;
  /* 手写装饰字（见下方 @font-face）：笔迹 / 花体 */
  --ct-font-hand: "CT Hand", "Segoe Script", "Bradley Hand", cursive;
  --ct-font-script: "CT Script", "Snell Roundhand", "Brush Script MT", cursive;
}

/* ============================================================
   手写装饰字体（本地自托管 · 离线可用 · 无远程请求）
   CT Hand    = Dawning of a New Day  © 2010 Kimberly Geswein
   CT Script  = Italianno             © 2009 The Italianno Project Authors (Sorkin Type Co)
   两者均为 SIL Open Font License 1.1，允许嵌入与自托管分发。
   许可证全文见 app/fonts/ofl-*.txt；字形集已子集化为拉丁可打印字符。
   ============================================================ */
@font-face {
  font-family: "CT Hand";
  src: url("../fonts/ct-hand.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "CT Script";
  src: url("../fonts/ct-script.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}

@media (min-width: 600px) { :root { --ct-page-pad: 28px; } }
@media (min-width: 1024px) { :root { --ct-page-pad: 40px; } }
@media (min-width: 1280px) { :root { --ct-page-pad: 48px; } }

/* ============================================================
   基础
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.ct-body,
body {
  font-family: var(--ct-font);
  color: var(--ct-text);
  background: var(--ct-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;                 /* 合同 14.6：不得出现横向滚动条 */
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* 标题层级：使用 clamp 处理响应式（合同 2.4） */
.ct-display {
  font-size: clamp(30px, 7.4vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ct-heading);
}
.ct-page-title {
  font-size: clamp(24px, 5.4vw, 34px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ct-heading);
}
.ct-section-heading {
  font-size: clamp(19px, 3.4vw, 24px);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ct-heading);
}
.ct-card-title { font-size: 17px; font-weight: 700; color: var(--ct-heading); }
.ct-body-text { font-size: 15px; color: var(--ct-text); }
.ct-caption { font-size: 13px; color: var(--ct-text-secondary); }
.ct-micro { font-size: 12px; color: var(--ct-text-tertiary); }

/* 英文装饰字：真实手写笔迹，仅用于局部品牌点缀（合同 2.4）。
   注意：不使用 font-style: italic 伪装手写。 */
.ct-deco-en {
  font-family: var(--ct-font-hand);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.06;
  opacity: .9;
}

/* ============================================================
   布局容器
   ============================================================ */
.ct-page {
  width: 100%;
  max-width: var(--ct-page-max);
  margin: 0 auto;
  padding-inline: var(--ct-page-pad);
}
.ct-tool-shell {
  width: 100%;
  max-width: var(--ct-tool-max);
  margin: 0 auto;
  padding-inline: var(--ct-page-pad);
}

/* 无障碍隐藏（保留可读） */
.ct-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 焦点可见（合同 13.5） */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ct-accent);
  outline-offset: 2px;
  border-radius: var(--ct-radius-xs);
}
.ct-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ct-surface); color: var(--ct-ink);
  padding: 10px 16px; border-radius: var(--ct-radius-sm);
  box-shadow: var(--ct-shadow-floating); transition: top var(--ct-dur) var(--ct-ease);
}
.ct-skip-link:focus { top: 12px; }

/* ============================================================
   减少动效（合同 13 减少动画设置）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   通用工具类
   ============================================================ */
.ct-hidden { display: none !important; }
.ct-row { display: flex; align-items: center; }
.ct-between { display: flex; align-items: center; justify-content: space-between; }
.ct-gap-2 { gap: var(--ct-space-2); }
.ct-gap-3 { gap: var(--ct-space-3); }
.ct-gap-4 { gap: var(--ct-space-4); }
.ct-grow { flex: 1; min-width: 0; }
.ct-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-divider { height: 1px; background: var(--ct-border); border: 0; margin: var(--ct-space-5) 0; }

/* 安全区（合同 14.6） */
.ct-safe-bottom { padding-bottom: calc(var(--ct-space-5) + env(safe-area-inset-bottom, 0px)); }