/* ============================================================
   L1 · 原始值层 —— 产品(meta)
   ------------------------------------------------------------
   设计依据:/root/AIUI/meta/DESIGN.md,值取自第一期已验收的原型。
     - 双 CTA 体系:主按钮近黑,交易类动作(发送/续期)用钴蓝 #0064e0
     - 药丸半径 100px 是品牌签名,按钮/胶囊/徽章一律全圆
     - 正文负字距 -0.16px,字重口径偏重(mid=700)
     - 卡片 16/24px 圆角分级,紧凑高信息密度
     - 扁平为主,阴影只作为「交易流」信号(1px 4px 微阴影)
     - 磨砂密度最高:blur(22px) @ 72% 不透明
   ============================================================ */

[data-theme-name='meta'] {
  --t-font-display: 'Optimistic Display', 'Optimistic VF', Montserrat, 'Helvetica Neue', Helvetica, Arial, system-ui, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans', sans-serif;
  --t-font-body: 'Optimistic Text', 'Optimistic VF', Montserrat, 'Helvetica Neue', Helvetica, Arial, system-ui, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans', sans-serif;
  --t-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --t-fs-display: 40px; --t-fs-h1: 30px; --t-fs-h2: 24px; --t-fs-h3: 18px;
  --t-fs-body: 16px; --t-fs-sm: 14px; --t-fs-xs: 13px; --t-fs-xxs: 12px;
  --t-fw-body: 400; --t-fw-mid: 700; --t-fw-strong: 500;
  --t-track-display: -0.5px; --t-track-title: -0.3px; --t-track-body: -0.16px;
  --t-lh-tight: 1.16; --t-lh-snug: 1.25; --t-lh-body: 1.5;

  --t-r-xs: 2px; --t-r-sm: 4px; --t-r-md: 8px; --t-r: 8px;
  --t-r-lg: 16px; --t-r-xl: 24px; --t-r-pill: 100px;

  --t-dur-fast: 150ms; --t-dur: 200ms; --t-dur-slow: 300ms;
  --t-ease: cubic-bezier(.4,0,.2,1);
  --t-ease-out: cubic-bezier(.2,.8,.3,1);
  --t-ease-spring: cubic-bezier(.34,1.4,.64,1);
  --t-press: .97;

  --t-glass-blur: saturate(170%) blur(22px);
  --t-glass-alpha: .72;
  --t-sidebar-w: 248px;
  --t-btn-weight: 700;
  --t-nav-radius: var(--t-r-pill);
  --t-lh-loose: 1.7;
}
[data-theme-name='meta'][data-theme='light'] {
  --t-primary: #0064e0; --t-primary-hover: #0091ff; --t-primary-active: #0457cb;
  --t-primary-soft: #e6effc; --t-on-primary: #ffffff; --t-focus: rgb(24 118 242 / .5);
  --t-canvas: #ffffff; --t-surface-1: #ffffff; --t-surface-2: #f1f4f7;
  --t-surface-3: #f7f9fb; --t-surface-4: #e4e9ef;
  --t-glass-rgb: 241 244 247;
  --t-invert: #0a1317; --t-invert-2: #1c1e21; --t-on-invert: #ffffff; --t-on-invert-soft: #8595a4;
  --t-ink: #0a1317; --t-ink-body: #1c1e21; --t-ink-muted: #4b4c4f; --t-ink-subtle: #5d6c7b;
  --t-hairline: #ced0d4; --t-hairline-soft: #dee3e9; --t-hairline-strong: #b3b8bf;
  --t-ok: #1e8236; --t-ok-soft: #e3f5e7;
  --t-warn: #8a6100; --t-warn-soft: #fdf3dd;
  --t-danger: #e41e3f; --t-danger-soft: #fce8ec;
  --t-info: #0064e0; --t-info-soft: #e6effc;
  --t-scrim: rgb(10 19 23 / .4);
  --t-shadow-1: 0 1px 1px rgb(0 0 0 / .2);
  --t-shadow-2: 0 1px 4px rgb(20 22 26 / .3);
  --t-shadow-3: 0 12px 36px rgb(20 22 26 / .28);
  --t-rp-speech: #0457cb; --t-rp-inner: #5d6c7b; --t-rp-action: #4b4c4f;
  --t-tag1: #e6effc; --t-tag1f: #0457cb; --t-tag2: #e3f5e7; --t-tag2f: #1e8236;
  --t-tag3: #f3e4fa; --t-tag3f: #7a19a3; --t-tag4: #fdf3dd; --t-tag4f: #8a6100;
  --t-tag5: #e8eef4; --t-tag5f: #3f5c75; --t-tag6: #fce8ec; --t-tag6f: #b3162f;
  --t-tag7: #e4f2f5; --t-tag7f: #1a6b78; --t-tag8: #eef1f4; --t-tag8f: #4b4c4f;
  --t-shadow-0: none;
  --t-rp-system-bg: #f1f4f7;
  --t-rp-system-fg: #4b4c4f;
  --t-rp-think-bg: #f1f4f7;
}
[data-theme-name='meta'][data-theme='dark'] {
  --t-primary: #4b9bff; --t-primary-hover: #6fb0ff; --t-primary-active: #2f80e8;
  --t-primary-soft: #142744; --t-on-primary: #071426; --t-focus: rgb(75 155 255 / .55);
  --t-canvas: #0a1317; --t-surface-1: #131c21; --t-surface-2: #1a252b;
  --t-surface-3: #172026; --t-surface-4: #22303a;
  --t-glass-rgb: 19 28 33;
  --t-invert: #f1f4f7; --t-invert-2: #dee3e9; --t-on-invert: #0a1317; --t-on-invert-soft: #5d6c7b;
  --t-ink: #f1f4f7; --t-ink-body: #dee3e9; --t-ink-muted: #a9b4be; --t-ink-subtle: #8595a4;
  --t-hairline: #2c3a44; --t-hairline-soft: #243038; --t-hairline-strong: #3c4c58;
  --t-ok: #5ec97a; --t-ok-soft: #14301c;
  --t-warn: #f7b928; --t-warn-soft: #33280a;
  --t-danger: #f0284a; --t-danger-soft: #3a1520;
  --t-info: #4b9bff; --t-info-soft: #142744;
  --t-scrim: rgb(0 0 0 / .62);
  --t-shadow-1: 0 1px 1px rgb(0 0 0 / .5);
  --t-shadow-2: 0 1px 6px rgb(0 0 0 / .58);
  --t-shadow-3: 0 12px 36px rgb(0 0 0 / .66);
  --t-rp-speech: #7cb8ff; --t-rp-inner: #8595a4; --t-rp-action: #a9b4be;
  --t-tag1: #142744; --t-tag1f: #8cbcff; --t-tag2: #14301c; --t-tag2f: #6fd98a;
  --t-tag3: #291a3a; --t-tag3f: #c69bea; --t-tag4: #33280a; --t-tag4f: #f0cd63;
  --t-tag5: #1a2833; --t-tag5f: #9dbdd6; --t-tag6: #3a1520; --t-tag6f: #f58aa2;
  --t-tag7: #12292e; --t-tag7f: #74c8d4; --t-tag8: #22303a; --t-tag8f: #a9b4be;
  --t-shadow-0: none;
  --t-rp-system-bg: #1a252b;
  --t-rp-system-fg: #a9b4be;
  --t-rp-think-bg: #1a252b;
}

/* ============================================================
   主题级定向覆盖 —— 仅 Meta
   ------------------------------------------------------------
   约定(第一期设计稿第 5 节):这类覆盖只允许写在主题自己的 L1 文件里,
   删掉一个主题就是删一个文件,不在组件层留残骸。
   只改颜色 / 字体 / 圆角 / 阴影 / 动效 / 磨砂,
   不动布局、DOM、间距体系与信息层级。
   ============================================================ */

/* 1. 药丸 100px 是品牌签名:按钮、分段、标签页、胶囊、徽章一律全圆 */
[data-theme-name='meta'] .btn,
[data-theme-name='meta'] .icon-btn,
[data-theme-name='meta'] .seg,
[data-theme-name='meta'] .seg-btn,
[data-theme-name='meta'] .tab,
[data-theme-name='meta'] .chip,
[data-theme-name='meta'] .chip-toggle,
[data-theme-name='meta'] .chip-info,
[data-theme-name='meta'] .comment-like,
[data-theme-name='meta'] .composer-send { border-radius: var(--t-r-pill); }

/* 2. 双 CTA 体系:主按钮走近黑药丸(营销面口径),
      钴蓝留给「交易类」动作 —— 发送消息与赞助续期。 */
[data-theme-name='meta'] .btn-primary { background: var(--surface-invert); color: var(--on-invert); }
[data-theme-name='meta'] .btn-primary:hover { background: var(--surface-invert-2); }
[data-theme-name='meta'] .composer-send { background: var(--primary); color: var(--on-primary); }
[data-theme-name='meta'] .composer-send:hover { background: var(--primary-hover); }
[data-theme-name='meta'] .btn-ghost { color: var(--ink); border-color: var(--ink); }
[data-theme-name='meta'] .btn-ghost:hover { background: var(--surface-2); }

/* 3. 卡片圆角分级:普通卡 16px,弹窗与广场卡推到 24px */
[data-theme-name='meta'] .card,
[data-theme-name='meta'] .panel,
[data-theme-name='meta'] .stat { border-radius: var(--t-r-lg); }
[data-theme-name='meta'] .modal,
[data-theme-name='meta'] .composer-box { border-radius: var(--t-r-xl); }

/* 4. 扁平为主:卡片悬浮不抬升,只换描边(阴影是交易流信号,不是营销装饰) */
[data-theme-name='meta'] .card:hover { box-shadow: var(--shadow-2); border-color: var(--hairline-strong); }
[data-theme-name='meta'] .stat:hover { transform: none; }

/* 5. 侧栏选中态走近黑填充(对应品牌的 pill-tab-active) */
[data-theme-name='meta'] .nav-item.is-active { background: var(--surface-invert); color: var(--on-invert); }
[data-theme-name='meta'] .nav-item.is-active > i { color: var(--on-invert); }
[data-theme-name='meta'] .nav-item.is-active .nav-count { background: rgb(255 255 255 / .22); color: var(--on-invert); }
[data-theme-name='meta'] .tab.is-active { background: var(--surface-invert); color: var(--on-invert); box-shadow: none; }

/* 6. 反色代码块用品牌深墨,不用纯黑 */
[data-theme-name='meta'] .code-block { background: var(--surface-invert); }