/* ==========================================================================
   TY 主题 · 设计令牌
   黑白双模式：默认跟随系统 prefers-color-scheme，可用 html[data-theme] 强制
   纯 CSS 媒体查询，首屏无闪烁；JS 只在用户手动切换时才参与
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* 供外壳复用的半透明基色：浅色=墨，深色=白 */
  --ty-hi-rgb: 16, 18, 21;
  --ty-accent-rgb: 236, 72, 153;

  /* 表面 */
  --ty-bg: #ffffff;
  --ty-bg-2: #f5f6f8;
  --ty-surface: #ffffff;
  --ty-surface-2: #f0f2f5;
  --ty-glass: rgba(255, 255, 255, .78);
  --ty-grid: rgba(17, 19, 24, .055);

  /* 文字 */
  --ty-text: #101215;
  --ty-text-2: #4d545e;
  --ty-text-3: #838b96;
  --ty-text-inv: #ffffff;

  /* 描边与阴影 */
  --ty-border: #e2e5ea;
  --ty-border-2: #c9ced6;
  --ty-line: #e2e5ea;
  --ty-line-2: #c9ced6;
  --ty-fg: #101215;
  --ty-fg-2: #4d545e;
  --ty-fg-3: #838b96;
  --ty-shadow: 0 18px 44px rgba(16, 18, 21, .10);
  --ty-shadow-sm: 0 2px 10px rgba(16, 18, 21, .06);
  --ty-ring: rgba(236, 72, 153, .35);

  /* 主色 = 墨；反色态自动变白，无需第二套变量 */
  --ty-accent: #ec4899;
  --ty-accent-2: #db2777;
  --ty-on-accent: #ffffff;
  /* 选中态（页签/开关）单独一对令牌：深色模式用抬升灰，
     否则和大面积反色白的主按钮叠在一起，层级就糊了 */
  --ty-sel-bg: #ec4899;
  --ty-sel-fg: #ffffff;

  /* 状态色（黑白主题里唯一保留的彩色，降饱和） */
  --ty-ok: #0a7d3f;
  --ty-ok-bg: rgba(10, 125, 63, .10);
  --ty-warn: #9a5b00;
  --ty-warn-bg: rgba(154, 91, 0, .10);
  --ty-err: #bf2f26;
  --ty-err-bg: rgba(191, 47, 38, .10);
  --ty-info: #1a5fd0;
  --ty-info-bg: rgba(26, 95, 208, .10);

  /* 粒子/装饰层，供 canvas 读取 */
  --ty-fx-particle: 255, 255, 255;
  --ty-fx-line: 16, 18, 21;
  --ty-fx-glow: 16, 18, 21;
  --ty-fx-alpha: .10;

  /* 尺度 */
  --ty-r-sm: 8px;
  --ty-r: 12px;
  --ty-r-lg: 18px;
  --ty-r-pill: 999px;
  --ty-gap: 16px;
  --ty-maxw: 1240px;
  --ty-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 液态玻璃：浅色模式下靠白纱 + 描边 + 投影，深色靠白雾 */
  --ty-glass-1: rgba(255, 255, 255, .82);
  --ty-glass-2: rgba(255, 255, 255, .52);
  --ty-glass-bd: rgba(16, 18, 21, .10);
  --ty-glass-rim: rgba(255, 255, 255, .9);
  --ty-page-1: #eef0f4;
  --ty-page-2: #f7f8fa;
}

/* 深色：跟随系统 */
@media (prefers-color-scheme: dark) {
  :root {
    --ty-hi-rgb: 255, 255, 255;
    --ty-accent-rgb: 255, 255, 255;
    --ty-bg: #0a0b0d;
    --ty-bg-2: #101215;
    --ty-surface: #14161a;
    --ty-surface-2: #1b1e23;
    --ty-glass: rgba(20, 22, 26, .72);
    --ty-grid: rgba(255, 255, 255, .055);

    --ty-text: #f3f5f7;
    --ty-text-2: #a9b1bc;
    --ty-text-3: #7b848f;
    --ty-text-inv: #0a0b0d;

    --ty-border: #26292e;
    --ty-border-2: #3a3f46;
  --ty-line: #26292e;
    --ty-line-2: #3a3f46;
    --ty-fg: #f3f5f7;
    --ty-fg-2: #a9b1bc;
    --ty-fg-3: #7b848f;
    --ty-shadow: 0 22px 54px rgba(0, 0, 0, .55);
    --ty-shadow-sm: 0 2px 12px rgba(0, 0, 0, .45);
    --ty-ring: rgba(255, 255, 255, .34);

    --ty-accent: #f3f5f7;
    --ty-accent-2: #cfd5dd;
    --ty-on-accent: #0a0b0d;
    --ty-sel-bg: #2a2e35;
    --ty-sel-fg: #f3f5f7;

    --ty-ok: #3ecf7a;
    --ty-ok-bg: rgba(62, 207, 122, .12);
    --ty-warn: #e0a03c;
    --ty-warn-bg: rgba(224, 160, 60, .12);
    --ty-err: #ff6b61;
    --ty-err-bg: rgba(255, 107, 97, .12);
    --ty-info: #6ea8ff;
    --ty-info-bg: rgba(110, 168, 255, .12);

    --ty-fx-particle: 255, 255, 255;
    --ty-fx-line: 255, 255, 255;
    --ty-fx-glow: 120, 140, 170;
    --ty-fx-alpha: .16;

      --ty-glass-1: rgba(255, 255, 255, .075);
    --ty-glass-2: rgba(255, 255, 255, .028);
    --ty-glass-bd: rgba(255, 255, 255, .14);
    --ty-glass-rim: rgba(255, 255, 255, .22);
    --ty-page-1: #07080c;
    --ty-page-2: #0d1017;
  }
}

/* 手动覆盖：系统偏好在 html[data-theme] 存在时让位 */
:root[data-theme="light"] {
  color-scheme: light;
  --ty-line: #e2e5ea;
  --ty-line-2: #c9ced6;
  --ty-fg: #101215;
  --ty-fg-2: #4d545e;
  --ty-fg-3: #838b96;
  --ty-glass-1: rgba(255, 255, 255, .82);
  --ty-glass-2: rgba(255, 255, 255, .52);
  --ty-glass-bd: rgba(16, 18, 21, .10);
  --ty-glass-rim: rgba(255, 255, 255, .9);
  --ty-page-1: #eef0f4;
  --ty-page-2: #f7f8fa;
  --ty-hi-rgb: 16, 18, 21;
  --ty-accent-rgb: 236, 72, 153;
  --ty-bg: #ffffff;
  --ty-bg-2: #f5f6f8;
  --ty-surface: #ffffff;
  --ty-surface-2: #f0f2f5;
  --ty-glass: rgba(255, 255, 255, .78);
  --ty-grid: rgba(17, 19, 24, .055);
  --ty-text: #101215;
  --ty-text-2: #4d545e;
  --ty-text-3: #838b96;
  --ty-text-inv: #ffffff;
  --ty-border: #e2e5ea;
  --ty-border-2: #c9ced6;
  --ty-shadow: 0 18px 44px rgba(16, 18, 21, .10);
  --ty-shadow-sm: 0 2px 10px rgba(16, 18, 21, .06);
  --ty-ring: rgba(236, 72, 153, .35);
  --ty-accent: #ec4899;
  --ty-accent-2: #db2777;
  --ty-on-accent: #ffffff;
  --ty-ok: #0a7d3f;
  --ty-ok-bg: rgba(10, 125, 63, .10);
  --ty-warn: #9a5b00;
  --ty-warn-bg: rgba(154, 91, 0, .10);
  --ty-err: #bf2f26;
  --ty-err-bg: rgba(191, 47, 38, .10);
  --ty-info: #1a5fd0;
  --ty-info-bg: rgba(26, 95, 208, .10);
  --ty-fx-particle: 40, 44, 52;
  --ty-fx-line: 16, 18, 21;
  --ty-fx-glow: 16, 18, 21;
  --ty-fx-alpha: .10;
  --ty-sel-bg: #ec4899;
  --ty-sel-fg: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ty-sel-bg: #2a2e35;
  --ty-sel-fg: #f3f5f7;
  --ty-line: #26292e;
  --ty-line-2: #3a3f46;
  --ty-fg: #f3f5f7;
  --ty-fg-2: #a9b1bc;
  --ty-fg-3: #7b848f;
  --ty-glass-1: rgba(255, 255, 255, .075);
  --ty-glass-2: rgba(255, 255, 255, .028);
  --ty-glass-bd: rgba(255, 255, 255, .14);
  --ty-glass-rim: rgba(255, 255, 255, .22);
  --ty-page-1: #07080c;
  --ty-page-2: #0d1017;
  --ty-hi-rgb: 255, 255, 255;
  --ty-accent-rgb: 255, 255, 255;
  --ty-bg: #0a0b0d;
  --ty-bg-2: #101215;
  --ty-surface: #14161a;
  --ty-surface-2: #1b1e23;
  --ty-glass: rgba(20, 22, 26, .72);
  --ty-grid: rgba(255, 255, 255, .055);
  --ty-text: #f3f5f7;
  --ty-text-2: #a9b1bc;
  --ty-text-3: #7b848f;
  --ty-text-inv: #0a0b0d;
  --ty-border: #26292e;
  --ty-border-2: #3a3f46;
  --ty-shadow: 0 22px 54px rgba(0, 0, 0, .55);
  --ty-shadow-sm: 0 2px 12px rgba(0, 0, 0, .45);
  --ty-ring: rgba(255, 255, 255, .34);
  --ty-accent: #f3f5f7;
  --ty-accent-2: #cfd5dd;
  --ty-on-accent: #0a0b0d;
  --ty-ok: #3ecf7a;
  --ty-ok-bg: rgba(62, 207, 122, .12);
  --ty-warn: #e0a03c;
  --ty-warn-bg: rgba(224, 160, 60, .12);
  --ty-err: #ff6b61;
  --ty-err-bg: rgba(255, 107, 97, .12);
  --ty-info: #6ea8ff;
  --ty-info-bg: rgba(110, 168, 255, .12);
  --ty-fx-particle: 255, 255, 255;
  --ty-fx-line: 255, 255, 255;
  --ty-fx-glow: 120, 140, 170;
  --ty-fx-alpha: .16;
}

/* --------------------------------------------------------------------------
   基座：只在 TY 页面包裹层内生效，不裸改 body，避免污染未迁移页面
   -------------------------------------------------------------------------- */
.ty-root {
  background: var(--ty-bg);
  color: var(--ty-text);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* 网格底纹，参考稿的方格背景 */
.ty-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ty-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ty-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
}

/* 通用原子 */
.ty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--ty-r-pill);
  border: 1px solid var(--ty-border);
  background: var(--ty-glass);
  color: var(--ty-text-2);
  font-size: 13px;
  line-height: 1;
}

.ty-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ty-ok);
  box-shadow: 0 0 0 3px var(--ty-ok-bg);
}

.ty-card {
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-r-lg);
  box-shadow: var(--ty-shadow);
}

/* 焦点可见性：黑白主题下靠描边而不是彩色 */
.ty-root a:focus-visible,
.ty-root button:focus-visible,
.ty-root input:focus-visible,
.ty-root select:focus-visible {
  outline: 2px solid var(--ty-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ty-root *,
  .ty-root *::before,
  .ty-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------- 液态玻璃基元 */
.ty-glass {
  position: relative;
  background: linear-gradient(155deg, var(--ty-glass-1), var(--ty-glass-2));
  border: 1px solid var(--ty-glass-bd);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: var(--ty-shadow);
}

/* 顶部一条内高光 + 1px 实描边即可做出玻璃边。
   不用 mask-composite 挖边：该写法在 Chrome 下不稳定，
   失效时整条渐变会糊在卡片上，看起来像一道白斑。 */
.ty-glass {
  box-shadow:
    var(--ty-shadow),
    inset 0 1px 0 var(--ty-glass-rim);
}


/* ==========================================================================
   品牌渐变令牌（粉 → 蓝）
   来源：rgb(249,204,205) → rgb(175,201,222)。
   这两个亮度都在 78~89%，属于「氛围级」颜色，不是「操作级」：
   黑字压上去 11~13:1（AAA），白字只有 1.4~1.7:1（不可用）。
   所以它们只允许出现在 hero 底色、光斑、投影色温、hover 底色上；
   按钮 / 链接 / 正文一律保持 --ty-accent 那套黑白，官网才不像换了个站。

   中点 #D4CBD6 饱和度只有 11.7%，接近中性 —— 这是这对颜色能用的关键：
   渐变走起来是「暖 → 冷的浅灰」，不是「粉 → 蓝的糖」。
   ========================================================================== */
:root {
  --ty-blush-rgb: 249, 204, 205;
  --ty-powder-rgb: 175, 201, 222;
  --ty-mist-rgb: 212, 203, 214;

  /* hero 渐变两端的强度，和光斑的 alpha */
  --ty-wash-a: .58;
  --ty-wash-b: .52;
  --ty-orb-a: .18;
  --ty-orb-b: .14;

  /* 可选强调色：中点同色相压到 L44%，白底 5.74:1 达 AA。
     目前只用在焦点环上，链接仍然是黑色。 */
  --ty-plum: #84558b;
  --ty-plum-rgb: 132, 85, 139;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 深色不换颜色，只换 alpha：wash 从 .58/.52 压到 .11/.13，
       光斑从 .18/.14 压到 .075/.06。
       结果是近黑底上一层几乎察觉不到的冷暖偏移 —— 氛围留住了，
       又不会在深色里发光。千万别另外推导一套深色 hex，必然跑偏。 */
    --ty-wash-a: .11;
    --ty-wash-b: .13;
    --ty-orb-a: .075;
    --ty-orb-b: .06;
    --ty-mist-rgb: 22, 21, 26;
    --ty-plum: #b79ac4;
    --ty-plum-rgb: 183, 154, 196;
  }
}

:root[data-theme="light"] {
  --ty-wash-a: .58;
  --ty-wash-b: .52;
  --ty-orb-a: .18;
  --ty-orb-b: .14;
  --ty-mist-rgb: 212, 203, 214;
  --ty-plum: #84558b;
  --ty-plum-rgb: 132, 85, 139;
}

:root[data-theme="dark"] {
  --ty-wash-a: .11;
  --ty-wash-b: .13;
  --ty-orb-a: .075;
  --ty-orb-b: .06;
  --ty-mist-rgb: 22, 21, 26;
  --ty-plum: #b79ac4;
  --ty-plum-rgb: 183, 154, 196;
}


/* ==========================================================================
   补齐与会员端 ty.tokens.css 的差集。
   官网这份原来只有 --ty-shadow，没有 --ty-panel / --ty-panel-line /
   --ty-glow-rgb，导致任何引用它们的规则会被浏览器静默丢弃（不报错、
   就是没效果）。两边对齐后，官网和会员端的玻璃卡片、玻璃按钮
   才能用同一套配方。
   ========================================================================== */
:root {
  --ty-glow-rgb: 12, 14, 18;
  --ty-panel: rgba(255, 255, 255, .92);
  --ty-panel-line: rgba(16, 18, 21, .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ty-glow-rgb: 0, 0, 0;
    --ty-panel: rgba(18, 20, 25, .88);
    --ty-panel-line: rgba(255, 255, 255, .10);
  }
}

:root[data-theme="light"] {
  --ty-glow-rgb: 12, 14, 18;
  --ty-panel: rgba(255, 255, 255, .92);
  --ty-panel-line: rgba(16, 18, 21, .10);
}

:root[data-theme="dark"] {
  --ty-glow-rgb: 0, 0, 0;
  --ty-panel: rgba(18, 20, 25, .88);
  --ty-panel-line: rgba(255, 255, 255, .10);
}


/* ==========================================================================
   深色下「同样的 alpha 会亮很多」的修正令牌。
   rgba(249,204,205,.12) 压在 #fff 上算出来是 254（不可见），
   压在 #0a0b0d 上算出来是 39（亮度翻近 4 倍）。
   所以氛围光晕的强度必须按模式分开，不能共用一个 alpha。
   --ty-bg-rgb 用于页脚顶部「从透明淡入到实色」，
   避免固定的粒子层在交界处被硬切成一条线。
   ========================================================================== */
:root {
  --ty-bg-rgb: 255, 255, 255;
  --ty-ft-glow: .13;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ty-bg-rgb: 10, 11, 13;
    --ty-ft-glow: .045;
  }
}

:root[data-theme="light"] {
  --ty-bg-rgb: 255, 255, 255;
  --ty-ft-glow: .13;
}

:root[data-theme="dark"] {
  --ty-bg-rgb: 10, 11, 13;
  --ty-ft-glow: .045;
}