@import "tailwindcss";

/* ════════════════════════════════════════════════════════════════════
   Inalpha Operator Console — 设计系统
   美学方向「印章终端 / Vermilion Terminal」:一台戴着朱红印章的交易终端。
   两种照明 = 同一台终端的两种工作场景:
     · Terminal Dark  (盘中 / intraday) —— 墨黑底 + 电光青数据 + 朱红印章
     · Broadsheet Light (复盘 / review)  —— 报纸暖白 + 墨黑字 + 同一枚印章
   设计语言完整记录见 apps/dashboard/design.md。
   ──────────────────────────────────────────────────────────────────
   主题实现:原始色值声明在 :root / [data-theme] 上,@theme inline 把
   Tailwind 的 --color-* 指向这些原始变量 —— 切 data-theme 即整盘换肤,
   所有 bg-· text-· border-· 等工具类(含 opacity 透明度修饰)自动跟随。
   ════════════════════════════════════════════════════════════════════ */

/* ── CJK 字面钉死(macOS 鸳鸯体修复) ────────────────────────────────
   macOS Chromium 用系统族名 "PingFang SC" 时,weight 500/600 的中文段落会
   在 shaping run 边界丢字重 → 同段前粗后细(鸳鸯体)。用 local() 按 weight
   区间显式钉住 PingFang 各字面,绕过系统族的字重匹配。非 macOS 无此字体,
   local() 不命中即透明跳过。区间覆盖项目用到的 300/400/500/600/700
   (700 钉到 Semibold —— PingFang 无 Bold,与系统行为一致,避免合成加粗)。 */
@font-face {
  font-family: "PingFang Pinned";
  src: local("PingFangSC-Light"), local("PingFang SC Light");
  font-weight: 100 349;
}
@font-face {
  font-family: "PingFang Pinned";
  src: local("PingFangSC-Regular"), local("PingFang SC Regular");
  font-weight: 350 449;
}
@font-face {
  font-family: "PingFang Pinned";
  src: local("PingFangSC-Medium"), local("PingFang SC Medium");
  font-weight: 450 559;
}
@font-face {
  font-family: "PingFang Pinned";
  src: local("PingFangSC-Semibold"), local("PingFang SC Semibold");
  font-weight: 560 900;
}

/* ── Terminal Dark(默认) ───────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --surface-deep: #04060d; /* 最底:侧栏 / 凹槽 */
  --surface: #080b14; /* 主背景 */
  --surface-elev: #0f1320; /* 抬起的卡片 / 面板 */
  --ink: #eef1f7; /* 主前景 */
  --ink-muted: #8089a0; /* 次级文字 */
  --hairline: #1b2235; /* 极细分隔线 */

  --accent: #5cc6ff; /* 电光青 —— 数据 / 交互主色 */
  --accent-dim: #2a5a7a;
  --seal: #e2533f; /* 朱红印章 —— 品牌标记色 */
  --down: #f0584b; /* 跌 / 拒单 / 错误 */
  --gold: #e0b03f; /* 在途 / 警示 */
  --up: #2fcf8e; /* 涨 / 成交 / 运行中 */
  --up-dim: #2a7a55;

  /* 背景纹理强度(颗粒 / 晕影在两主题下需不同力度) */
  --grain-opacity: 0.035;
  --grain-blend: overlay;
  --vignette: color-mix(in oklab, var(--surface-deep) 70%, transparent);
}

/* ── Broadsheet Light ─────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --surface-deep: #e7e3d6; /* 报纸暖白的凹槽 */
  --surface: #f4f1e8; /* 报纸暖白 */
  --surface-elev: #fcfbf5; /* 抬起的近白卡片 */
  --ink: #15171d; /* 墨黑 */
  --ink-muted: #5b6170;
  --hairline: #d9d4c5; /* 暖色细线 */

  --accent: #0d6db0; /* 深青 —— 在亮底上可读 */
  --accent-dim: #9cc3df;
  --seal: #c8463c; /* 印章原色朱红 */
  --down: #c0392c;
  --gold: #9a7416;
  --up: #0f8a58;
  --up-dim: #6fb495;

  --grain-opacity: 0.045;
  --grain-blend: multiply;
  --vignette: color-mix(in oklab, var(--surface-deep) 55%, transparent);
}

/* ── Tailwind token 映射(inline → 工具类直接引用原始变量) ───────── */
@theme inline {
  --color-bg: var(--surface);
  --color-bg-deep: var(--surface-deep);
  --color-bg-elev: var(--surface-elev);
  --color-fg: var(--ink);
  --color-fg-muted: var(--ink-muted);
  --color-border-subtle: var(--hairline);

  --color-cyan: var(--accent);
  --color-cyan-dim: var(--accent-dim);
  --color-seal: var(--seal);
  --color-fox-red: var(--down);
  --color-gold: var(--gold);
  --color-bull: var(--up);
  --color-success-dim: var(--up-dim);

  /* 统一的中文回退栈 —— Geist(sans/mono)/Fraunces 均为纯拉丁字体,中文会回退到
     系统字体。把同一组 CJK 字体显式接到每条字体栈末尾,保证无论 sans 还是 mono 语境,
     中文都落到同一族(粗细/字形一致),不再"中文粗细不一"。
     注意:不能引用 var(--font-geist-*) —— geist 包变量自带完整回退链且以通用族
     (sans-serif / monospace)收尾,通用族必命中,接在后面的 CJK 永远轮不到,
     mono 语境中文会掉进浏览器默认中文等宽(宋体类)。直接写 @font-face 字族名。
     "PingFang Pinned" 见下方 @font-face:macOS Chromium 走系统回退(含
     "PingFang SC" 族名)时,font-weight 500/600 的段落会出现鸳鸯体(同段前粗
     后细,字重在 shaping run 间丢失);用 local() 按字重区间钉死具体字面绕过。
     **钉面必须排在 ui-sans-serif / system-ui 之前**:macOS 的 system-ui(San
     Francisco)会内部级联接管 CJK 字形,排在它后面的 CJK 族永远轮不到,bug
     照旧。非 macOS 上 local() 不命中,自然落到 YaHei / Noto。 */
  --font-cjk: "PingFang Pinned", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;

  --font-sans: GeistSans, "PingFang Pinned", ui-sans-serif, system-ui, var(--font-cjk);
  --font-mono: GeistMono, "PingFang Pinned", ui-monospace, "SF Mono", var(--font-cjk);
  --font-display: var(--font-display), "PingFang Pinned", ui-serif, "Iowan Old Style", Georgia, var(--font-cjk);
}

@layer base {
  html {
    background-color: var(--surface);
    color: var(--ink);
    /* 换肤平滑过渡 —— 只过渡颜色,不动布局 */
    transition:
      background-color 0.4s ease,
      color 0.4s ease;
  }

  body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11", "zero", "calt";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background-color: color-mix(in oklab, var(--accent) 35%, transparent);
    color: var(--ink);
  }

  /* 可点击交互一律手型光标(button 默认是 default,这里统一纠正);
     禁用态回到 not-allowed,与视觉的灰态对齐。 */
  button,
  [role="button"],
  a[href],
  label[for],
  summary,
  select {
    cursor: pointer;
  }
  button:disabled,
  [aria-disabled="true"],
  [disabled] {
    cursor: not-allowed;
  }

  /* 终端化滚动条 —— 细、暗、青色 thumb。 */
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--ink-muted) 45%, transparent)
      transparent;
  }
  *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  *::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--ink-muted) 40%, transparent);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklab, var(--accent) 55%, transparent);
    background-clip: content-box;
  }

  /* 所有数字默认等宽对齐 —— 看板里财务数据必须列对齐。 */
  .tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero";
  }
}

@layer utilities {
  /* 终端晕影:四角压暗,把视线收到盘面中央(盘口聚焦感)。 */
  .vignette::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      120% 120% at 50% 0%,
      transparent 55%,
      var(--vignette) 100%
    );
  }

  /* 纸张颗粒,加质感不偏色;亮色用 multiply、暗色用 overlay。 */
  .grain {
    position: relative;
  }
  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  }

  /* 编辑体 serif —— section 序号/标题用,broadsheet 调性。 */
  .display {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144, "SOFT" 20;
  }
  .display-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
    font-feature-settings: "ss01", "ss02";
    letter-spacing: -0.01em;
  }

  /* 印章光晕 —— 侧栏 logo 用,朱红微辉 + 缓慢呼吸,让品牌标记有生命感。 */
  @keyframes seal-breathe {
    0%,
    100% {
      filter: drop-shadow(0 0 0.5px color-mix(in oklab, var(--seal) 55%, transparent))
        drop-shadow(0 1px 7px color-mix(in oklab, var(--seal) 18%, transparent));
    }
    50% {
      filter: drop-shadow(0 0 0.5px color-mix(in oklab, var(--seal) 85%, transparent))
        drop-shadow(0 2px 13px color-mix(in oklab, var(--seal) 36%, transparent));
    }
  }
  .seal-glow {
    filter: drop-shadow(0 0 0.5px color-mix(in oklab, var(--seal) 60%, transparent))
      drop-shadow(0 1px 8px color-mix(in oklab, var(--seal) 22%, transparent));
    animation: seal-breathe 5s ease-in-out infinite;
  }

  /* 入场:轻微上浮淡入。配 inline animation-delay 做错落式揭示。 */
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .rise {
    animation: rise 0.5s cubic-bezier(0.22, 0.7, 0.22, 1) both;
  }

  /* 折叠侧栏气泡:右滑淡入(挂 body 的 portal,外层负责定位、本层只动画)。 */
  @keyframes tip-in {
    from {
      opacity: 0;
      transform: translateX(4px);
    }
  }
  .tip-in {
    animation: tip-in 0.15s ease-out both;
  }

  /* 数据列起始处的青色刻度(终端「行号 / 标尺」语感)。 */
  .tick-accent {
    position: relative;
  }
  .tick-accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.1em;
    width: 2px;
    transform: translateY(-50%);
    border-radius: 99px;
    background-color: var(--accent);
  }

  /* LIVE 指示器闪烁。 */
  @keyframes caret {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }
  .caret-blink {
    animation: caret 1.06s steps(1, end) infinite;
  }

  /* 数据刷新瞬间的轻微高亮(SWR 拿到新帧时点一下)。 */
  @keyframes flash-cyan {
    0% {
      background-color: color-mix(in oklab, var(--accent) 14%, transparent);
    }
    100% {
      background-color: transparent;
    }
  }
  .flash-cyan {
    animation: flash-cyan 0.9s ease-out;
  }
}

/* ── 内嵌对话栏:非浮层 reflow ──────────────────────────────────────
   ConsoleChat 打开时给 <html> 打 data-chat-open,主内容让出右侧宽度(与对话栏
   同宽),页面其余部分照常可滚动 / 可点击 / 可切面 —— 不是覆盖式浮层。
   窄屏(<1024px)退化:对话栏覆盖在内容上,main 不再被挤,避免密集表格被压裂。 */
main {
  /* 底部留出常驻活动日志条的高度(--activity-h 由 ActivityFooter 写入)。 */
  padding-bottom: var(--activity-h, 0px);
  transition:
    padding-right 0.3s cubic-bezier(0.22, 0.7, 0.22, 1),
    padding-bottom 0.3s cubic-bezier(0.22, 0.7, 0.22, 1);
}
html[data-chat-open="true"] main {
  padding-right: var(--chat-w, 400px);
}
/* 拖动调宽 / 调高时关过渡 —— 让主内容跟手,不滞后。 */
html[data-chat-dragging="true"] main,
html[data-activity-dragging="true"] main {
  transition: none;
}
@media (max-width: 1024px) {
  html[data-chat-open="true"] main {
    padding-right: 0;
  }
}

/* 底部活动日志:对话栏打开时让出右侧,不被对话栏盖住(窄屏铺满)。 */
.activity-footer {
  transition: right 0.3s cubic-bezier(0.22, 0.7, 0.22, 1);
}
html[data-chat-open="true"] .activity-footer {
  right: var(--chat-w, 400px);
}
@media (max-width: 1024px) {
  html[data-chat-open="true"] .activity-footer {
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  main {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    transition: none;
  }
  .caret-blink,
  .flash-cyan,
  .seal-glow,
  .rise {
    animation: none !important;
  }
}
