/* ==========================================================================
   CYNRIN Design Tokens — v1.0 "Straight Industrial" (直角直线版)
   全站唯一视觉事实来源。所有主题样式必须引用这些变量，禁止再硬编码
   颜色 / 字号 / 圆角 / 阴影 / 时长。

   落地方式（主题层，勿动 core/packages/plugins）：
     1. 本文件复制为 platform/themes/cynrin/public/css/design-tokens.css
     2. 在 layouts/base.blade.php 的 <head> 中，置于所有主题 CSS 之前引入：
        <link rel="stylesheet" href="{{ cynrin_asset('css/design-tokens.css') }}?v=1.0.0">
     3. 旧的 --* / --pv2-* / --ai-* 通过本文件末尾的"兼容桥接"自动对齐，
        无需一次性重写全部组件。
   单位约定：间距/尺寸 4px 基准；字号 px；阴影/动效见对应分组。
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. 品牌主色 / BRAND —— 保留靛蓝紫（AI 行业特色）
     ---------------------------------------------------------------------- */
  --c-brand:        #4f46e5;   /* Indigo 600，主色：主按钮/链接/强调 */
  --c-brand-strong: #4338ca;   /* Indigo 700，hover/按下 */
  --c-brand-soft:   #eef2ff;   /* Indigo 50，  浅底/标签底 */
  --c-violet:       #7c3aed;   /* Violet 600，渐变终点/深色区强调 */
  --c-blue:         #3b82f6;   /* Blue 500，  仅 hero 装饰渐变辅助 */

  /* 品牌渐变：仅用于主 CTA、标题渐变字、Eyebrow 标尺、图标、hero 装饰。
     禁止用于普通卡片底色与整屏大面积背景。 */
  --c-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

  /* ----------------------------------------------------------------------
     2. 中性色 / NEUTRAL —— 一套墨色 + 一套灰阶，禁止再出现近似多套
     ---------------------------------------------------------------------- */
  --c-ink:        #0a0a0a;   /* 主文字 / 标题 */
  --c-body:       #2f3134;   /* 正文（长段落） */
  --c-muted:      #65676b;   /* 次要文字、说明 */
  --c-faint:      #8a8d92;   /* 弱化文字、面包屑、占位 */
  --c-disabled:   #b6b8bb;   /* 禁用 */

  --c-border:     #e5e6e8;   /* 统一描边/分隔线（唯一） */
  --c-border-strong:#cfd1d4;/* 次按钮描边、强调描边 */
  --c-soft:       #f5f6f7;   /* 浅灰区块底 */
  --c-softer:     #fafafa;   /* 更浅区块底 / 斑马纹 */
  --c-white:      #ffffff;

  /* 深色区（contact / footer / 深色 band / 弹窗） */
  --c-dark:       #0c0c0c;   /* 深色区块底（contact） */
  --c-dark-2:     #171717;   /* 深色卡片/表单底 */
  --c-dark-3:     #222222;   /* 深色输入框底 */
  --c-dark-border:#3a3a3a;   /* 深色描边 */
  --c-on-dark:    rgba(255, 255, 255, .78); /* 深色区正文 */
  --c-on-dark-mut:rgba(255, 255, 255, .60); /* 深色区次要文字 */

  /* 功能色（克制使用） */
  --c-success:    #16a34a;
  --c-danger:     #dc2626;
  --c-danger-soft:#fee2e2;

  /* ----------------------------------------------------------------------
     3. 字体 / TYPE —— 单一字体族 Manrope
     ---------------------------------------------------------------------- */
  --c-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* 类型标尺（仅这 12 档；移动端 H 系列在组件层用 clamp 收一档） */
  --c-text-caption: 11px;  /* Eyebrow / 标签 / 版权 */
  --c-text-xs:      12px;  /* 辅助信息、卡片元信息、页脚链接 */
  --c-text-sm:      13px;  /* 导航、卡片正文、列表 */
  --c-text-base:    14px;  /* 按钮、默认正文 */
  --c-text-md:      16px;  /* 正文强调 / hero 副文 */
  --c-text-lg:      18px;  /* lede 起步 */
  --c-text-h4:      20px;
  --c-text-h3:      24px;
  --c-text-h2:      34px;  /* 区块标题（桌面） */
  --c-text-h1:      48px;  /* 内页标题 */
  --c-text-display: 58px;  /* 首页 hero 标题 */
  --c-text-hero:    clamp(42px, 5.2vw, 64px); /* 大标题统一走 clamp */

  --c-font-normal:  400;
  --c-font-medium:  600;
  --c-font-semibold:700;
  --c-font-bold:    800;

  /* 行高 / 字距 */
  --c-leading-tight: 1.08;  /* 标题 */
  --c-leading-snug:  1.25;
  --c-leading-body:  1.65;  /* 正文 */
  --c-leading-loose: 1.8;   /* 深色区/长文 */
  --c-track-tight:  -0.02em;/* 标题常规收紧 */
  --c-track-display:-0.03em;/* 大标题 */
  --c-track-caps:    0.12em;/* 大写小标签 */

  /* ----------------------------------------------------------------------
     4. 圆角 / RADIUS —— v1 直线版核心
     ---------------------------------------------------------------------- */
  --c-radius-none: 0;      /* 默认：所有框、卡片、按钮、输入 */
  --c-radius-pill: 0;      /* v1 连胶囊也直角化（标签用直角+描边） */
  --c-radius-circle: 50%;  /* 仅真正圆形：头像/圆点/关闭钮/图标底盘 */
  --c-radius-chip:  2px;   /* 需要轻微柔化的极小元素，默认也尽量不用 */

  /* ----------------------------------------------------------------------
     5. 间距 / SPACE —— 4px 基准
     ---------------------------------------------------------------------- */
  --c-space-1:  4px;
  --c-space-2:  8px;
  --c-space-3:  12px;
  --c-space-4:  16px;
  --c-space-5:  20px;
  --c-space-6:  24px;
  --c-space-8:  32px;
  --c-space-10: 40px;
  --c-space-12: 48px;
  --c-space-16: 64px;
  --c-space-20: 80px;
  --c-space-24: 96px;

  /* 容器与区块节奏（结构统一的关键） */
  --c-container:   1240px;
  --c-gutter:      32px;   /* 桌面容器左右内边距 */
  --c-gutter-sm:   20px;   /* ≤900px */
  --c-section:     96px;   /* 桌面区块上下留白 */
  --c-section-sm:  64px;   /* 窄屏区块上下留白 */
  --c-section-tight:  64px;/* 紧凑档桌面 */
  --c-section-tight-sm:48px;
  --c-grid-gap:    20px;   /* 卡片栅格统一间距 */
  --c-grid-gap-sm: 14px;

  /* 控件尺寸 */
  --c-control-h:    48px;  /* 按钮/输入框统一高度 */
  --c-control-h-sm: 40px;
  --c-control-px:   24px;  /* 按钮水平内边距 */

  /* 描边宽度 */
  --c-border-width: 1px;
  --c-border-width-strong: 2px;

  /* ----------------------------------------------------------------------
     6. 阴影 / ELEVATION —— 仅 4 档，直角元素配克制阴影
     ---------------------------------------------------------------------- */
  --c-shadow-none: none;
  --c-shadow-sm: 0 1px 2px rgba(10, 10, 10, .05);
  --c-shadow-md: 0 8px 24px rgba(10, 10, 10, .08);
  --c-shadow-lg: 0 18px 44px rgba(15, 12, 40, .10);
  /* 主按钮的品牌色投影（唯一带色相的阴影） */
  --c-shadow-brand: 0 12px 30px rgba(79, 70, 229, .24);

  /* ----------------------------------------------------------------------
     7. 动效 / MOTION —— 3 档时长 + 1 条缓动；只动 transform/opacity
     ---------------------------------------------------------------------- */
  --c-ease: cubic-bezier(.22, .61, .36, 1);
  --c-duration-fast:   120ms; /* 反馈：按下、边框 */
  --c-duration-base:   200ms; /* 默认：hover、显隐 */
  --c-duration-slow:   320ms; /* 面板、卡片上浮 */
  --c-move-1: translateY(-1px);
  --c-move-2: translateY(-2px);

  /* 层级 */
  --c-z-header: 20;
  --c-z-mega:   30;
  --c-z-modal:  40;
}

/* ==========================================================================
   8. 基础元素规范化（直角 + Token 化）
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--c-font-sans);
  font-size: var(--c-text-base);
  line-height: var(--c-leading-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-ink);
  font-weight: var(--c-font-bold);
  line-height: var(--c-leading-tight);
  letter-spacing: var(--c-track-tight);
}
p { margin: 0; }

/* 统一容器：全站唯一容器类 */
.container,
.c-container {
  width: min(var(--c-container), calc(100% - var(--c-gutter) * 2));
  margin-inline: auto;
}

/* 统一区块纵向节奏 */
.section,
.c-section { padding: var(--c-section) 0; }

@media (max-width: 900px) {
  .container,
  .c-container { width: min(var(--c-container), calc(100% - var(--c-gutter-sm) * 2)); }
  .section,
  .c-section { padding: var(--c-section-sm) 0; }
}

/* 直角总闸：把历史遗留的圆角在 v1 中一律压平。
   如需保留某个真正圆形元素，用 .is-circle 显式声明。 */
.button, .pv2-btn,
.product-card, .solution-card, .home-postcard,
.inquiry-form input, .inquiry-form textarea,
.home-newsletter__field input,
.pv2-media, .mega-panel-inner {
  border-radius: var(--c-radius-none);
}
.is-circle,
.step-icon,
.inquiry-modal-close { border-radius: var(--c-radius-circle); }

/* 渐变使用边界：提供一个明确的"品牌渐变"工具类，只在允许的元素上使用 */
.c-grad-text {
  background: var(--c-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* 尊重减弱动效偏好：关闭非必要动画 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   9. 兼容桥接 —— 让三套旧变量立即指向统一值（迁移期，勿删）
   说明：--orange 名称保留仅为兼容，实际值已是靛蓝；迁移完成后统一下线。
   ========================================================================== */
:root {
  /* 基础体系（theme.css / patch.css） */
  --ink:       var(--c-ink);
  --muted:     var(--c-muted);
  --line:      var(--c-border);
  --soft:      var(--c-soft);
  --white:     var(--c-white);
  --orange:    var(--c-brand);     /* 历史名，值=靛蓝 */
  --container: var(--c-container);
  --section:   var(--c-section);
}

.pv2 {
  --pv2-ink:    var(--c-ink);
  --pv2-muted:  var(--c-muted);
  --pv2-faint:  var(--c-faint);
  --pv2-line:   var(--c-border);
  --pv2-soft:   var(--c-soft);
  --pv2-softer: var(--c-softer);
  --pv2-indigo: var(--c-brand);
  --pv2-violet: var(--c-violet);
  --pv2-blue:   var(--c-blue);
  --pv2-dark:   var(--c-dark);
  --pv2-dark2:  var(--c-dark-2);
  --pv2-grad:   var(--c-grad);
  --pv2-ease:   var(--c-ease);
  --pv2-container: var(--c-container);
}

.ai-home {
  --ai-indigo: var(--c-brand);
  --ai-violet: var(--c-violet);
  --ai-blue:   var(--c-blue);
  --ai-grad:   var(--c-grad);
  --ai-ease:   var(--c-ease);
  --ai-shadow: var(--c-shadow-lg);
  --ai-shadow-deep: var(--c-shadow-lg);
}

/* ==========================================================================
   10. 阶段一 · 直角强制覆盖（STAGE-1 STRAIGHT OVERRIDES）
   历史的 ai-visual.css / pages-v2.css 在本文件之后加载，并用 .ai-home /
   .pv2 作用域给卡片、媒体、玻璃条加了权重更高的圆角。这里以同等或更高
   权重把所有"框类"元素的圆角压平；只改形状，不动渐变、动效与配色。
   真正需要圆形的元素（.step-icon 等图标底盘、50%）保持不变。
   ========================================================================== */
/* 选择器权重提到 0,3,0，确保胜过页面级后加载的 ai-visual.css（0,2,0）。 */
.ai-home .product-card.product-card,
.ai-home .product-media.product-media,
.ai-home .product-media.product-media::after,
.ai-home .solution-card.solution-card,
.ai-home .application-grid.application-grid article,
.ai-home .trust-strip.trust-strip,
.ai-home .home-postcard,
.ai-home .home-newsletter,
.ai-home .home-newsletter__inner,
.ai-home .home-newsletter__formwrap,
.ai-home .home-newsletter__field input,
.ai-home .button,
.ai-home input,
.ai-home textarea,
.ai-home select {
  border-radius: var(--c-radius-none);
}

/* pages-v2 内页体系：按钮/卡片/媒体/输入/标签一律直角（图标圆底盘除外）。
   pages-v2.css 在文章/资源页 body 内后加载，故同样提升权重。 */
.pv2 .pv2-btn.pv2-btn,
.pv2 .pv2-card,
.pv2 .pv2-media,
.pv2 input,
.pv2 textarea,
.pv2 select,
.pv2 .pv2-chip,
.pv2 .pv2-tag {
  border-radius: var(--c-radius-none);
}

/* 通用兜底：站点内任何残留的容器/卡片/控件圆角压平。
   用属性作用域避免误伤头像、圆点等真正的 50% 圆形。 */
.mega-panel-inner,
.inquiry-form input,
.inquiry-form textarea,
.inquiry-form select,
.inquiry-modal,
.product-card,
.solution-card,
.home-postcard,
.site-search input,
.newsletter-form input {
  border-radius: var(--c-radius-none);
}

/* 语言切换器在 patch.css 中以 !important 强制圆角（桌面 8px / 移动胶囊），
   v1 直角化需同等 !important 覆盖。 */
.site-header .language-wrapper .dropdown .btn,
.site-header .lang-switch .dropdown-toggle,
.site-header .lang-switch.lang-switch-mobile .dropdown-toggle,
.site-header .lang-switch .dropdown-menu.language_bar_chooser {
  border-radius: var(--c-radius-none) !important;
}

/* ==========================================================================
   11. 阶段二 · 动效 / 阴影 / 描边统一（STAGE-2 MOTION · ELEVATION · STROKE）
   目标：删除无限闪烁；超大紫色辉光收敛到 4 档中性阴影；卡片描边统一。
   只作用于自有组件类，绝不触碰采集 CSS-module chunk 的哈希类名。
   ========================================================================== */

/* 11.1 收敛 --ai-shadow 变量到统一的中性档位（影响所有用变量的卡片） */
.ai-home {
  --ai-shadow:      var(--c-shadow-md);
  --ai-shadow-deep: var(--c-shadow-lg);
}

/* 11.2 删除 hero 主/次按钮 hover 的无限闪烁动画（quote-flash/catalog-flash）。
   主题表用 .hero-actions .button-*:hover 选择器；这里同等权重、靠后加载胜出。
   保留渐变本身，仅去掉 0.8s infinite 光圈，改为克制的品牌阴影反馈。 */
.hero-actions .button-primary:hover,
.ai-home .button-primary:hover {
  animation: none;
  box-shadow: var(--c-shadow-brand);
}
.hero-actions .button-secondary:hover,
.ai-home .button-secondary:hover {
  animation: none;
}

/* 11.3 首页卡片：统一 1px 中性描边 + 直角（阶段一已压圆角），hover 上浮用中性 md 阴影，
   不再用紫色 1.5px 光圈（::after inset ring）和超大紫辉光。
   ai-visual.css 在 body 内晚于本文件加载，故选择器权重提到 0,3,0 才能胜出。 */
.ai-home .product-card.product-card,
.ai-home .solution-card.solution-card,
.ai-home .application-grid.application-grid article,
.ai-home .trust-strip.trust-strip {
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-none);
}
.ai-home .product-card.product-card:hover,
.ai-home .solution-card.solution-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--c-shadow-md);
  transform: translateY(-2px);
}
.ai-home .application-grid.application-grid article:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--c-shadow-md);
  transform: translateY(-2px);
}
/* 去掉产品图 hover 时出现的紫色 inset 光圈，避免"发光框" */
.ai-home .product-media.product-media::after,
.ai-home .product-card.product-card:hover .product-media.product-media::after {
  box-shadow: none;
  border: 0;
}

/* 11.4 博客卡 / 订阅区描边统一到令牌（深色订阅框仍用半透明白描边，单独保留） */
.home-postcard {
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-none);
}
.home-postcard:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--c-shadow-md);
  transform: translateY(-2px);
}

/* 11.5 步骤图标：保留 50% 圆形，但 hover 紫色辉光收敛为中性 + 极淡品牌环 */
.ai-home .process-step:hover .step-icon {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 10%, transparent);
}