/* TopxAI 纸面 — generated from tokens.json */
@font-face { font-family: "Noto Serif SC"; src: url("fonts/NotoSerifSC-Variable-subset.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  color-scheme: light;
  --bg-app: #f2f0eb;
  --bg-canvas: #faf9f6;
  --bg-raised: #fffefc;
  --bg-sunken: #f4f2ee;
  --bg-hover: #ebe8e2;
  --bg-selected: #e6e2da;
  --bg-inverse: #1f1d1a;
  --bg-user: #eeebe4;
  --overlay: rgba(31, 29, 26, 0.32);
  --border-subtle: #ebe8e1;
  --border: #dedad1;
  --border-strong: #c8c3b8;
  --control-border: #847f75;
  --text: #1f1d1a;
  --text-2: #57534b;
  --text-3: #69645b;
  --text-4: #a39e94;
  --text-inverse: #faf9f6;
  --accent: #2458ef;
  --accent-hover: #1d4bd6;
  --accent-pressed: #1a41b8;
  --accent-text: #1f4fd9;
  --accent-soft: #ebf0fe;
  --accent-soft-2: #dce5fd;
  --selection: var(--accent-soft-2);
  --on-accent: #ffffff;
  --focus: var(--accent-text);
  --success: #2a7047;
  --success-soft: #e7f2ea;
  --success-dot: #3b9a63;
  --warning: #8f5410;
  --warning-soft: #fbf1de;
  --warning-dot: #d98c1f;
  --danger: #b8352a;
  --danger-soft: #fbeae7;
  --danger-dot: #d9493c;
  --code-bg: #efece6;
  --code-text: #3b372f;
  --syn-keyword: #8a3fa6;
  --syn-fn: #1f4fd9;
  --syn-string: #2b7349;
  --syn-type: #9a5b0b;
  --syn-comment: #6e6a62;
  --agent-1: #4f6bed;
  --agent-2: #2a8c82;
  --agent-3: #7a5cc7;
  --agent-4: #b7791f;
  --agent-5: #c2456a;
  --agent-6: #6f7d2c;
  --brand-panel-1: #2152e6;
  --brand-panel-2: #1a40c0;
  --brand-panel-3: #0f2a84;
  --paper: #f4efe6;
  --paper-2: rgba(244, 239, 230, 0.72);
  --paper-3: rgba(244, 239, 230, 0.5);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif;
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-latin: "Instrument Serif", "Noto Serif SC", serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-btn-lg: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 999px;
  --control-sm-h: 28px;
  --control-h: 32px;
  --control-lg-h: 40px;
  --field-h: 34px;
  --chip-h: 30px;
  --chip-sm-h: 24px;
  --menu-item-h: 30px;
  --row-sub-h: 30px;
  --icon-button: 28px;
  --tag-h: 20px;
  --agent-chip-h: 22px;
  --tooltip-h: 26px;
  --card-head-h: 38px;
  --card-row-h: 32px;
  --code-head-h: 34px;
  --bar-h: 44px;
  --icon: 16px;
  --icon-sm: 14px;
  --icon-lg: 18px;
  --icon-stroke: 1.6;
  --disabled-opacity: 0.45;
  --sidebar-w: 264px;
  --header-h: 52px;
  --row-h: 32px;
  --chat-w: 720px;
  --composer-w: 760px;
  --panel-w: 380px;
  --window-min-w: 1040px;
  --window-min-h: 640px;
  --panel-side-min-w: 1372px;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-1: 0 1px 0 rgba(31, 29, 26, 0.04);
  --shadow-2: 0 1px 2px rgba(31, 29, 26, 0.05), 0 8px 28px -10px rgba(31, 29, 26, 0.14);
  --shadow-3: 0 2px 6px rgba(31, 29, 26, 0.06), 0 22px 56px -14px rgba(31, 29, 26, 0.26);
  --focus-ring: 0 0 0 3px rgba(36, 88, 239, 0.22);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #161513;
  --bg-canvas: #1b1a18;
  --bg-raised: #232220;
  --bg-sunken: #191816;
  --bg-hover: #282724;
  --bg-selected: #302e2a;
  --bg-inverse: #edebe6;
  --bg-user: #2b2a27;
  --overlay: rgba(0, 0, 0, 0.56);
  --border-subtle: #282724;
  --border: #34322e;
  --border-strong: #48453f;
  --control-border: #7c7870;
  --text: #edebe6;
  --text-2: #b5b1a8;
  --text-3: #99958b;
  --text-4: #64605a;
  --text-inverse: #1b1a18;
  --accent: #2f62f0;
  --accent-hover: #3767f0;
  --accent-pressed: #2552d8;
  --accent-text: #86a6ff;
  --accent-soft: #1f2640;
  --accent-soft-2: #27305a;
  --on-accent: #ffffff;
  --success: #62c08a;
  --success-soft: #1b2a21;
  --success-dot: #4fb179;
  --warning: #e2a853;
  --warning-soft: #2b2418;
  --warning-dot: #e09a37;
  --danger: #f2847a;
  --danger-soft: #2f1c1a;
  --danger-dot: #e8665a;
  --code-bg: #2a2926;
  --code-text: #d9d5cc;
  --syn-keyword: #d59bf0;
  --syn-fn: #86a6ff;
  --syn-string: #7ccb98;
  --syn-type: #e2a853;
  --syn-comment: #938f83;
  --agent-1: #7d93ff;
  --agent-2: #4fb8ac;
  --agent-3: #a58bef;
  --agent-4: #e0a64e;
  --agent-5: #ef7d9c;
  --agent-6: #a7b45a;
  --brand-panel-1: #1a3ca8;
  --brand-panel-2: #132e86;
  --brand-panel-3: #0a1b52;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --shadow-3: 0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 60px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --focus-ring: 0 0 0 3px rgba(110, 150, 255, 0.32);
}

.fs-poster { font-family: var(--font-display); font-size: 66px; line-height: 78px; font-weight: 300; letter-spacing: 0.035em; }
.fs-greet { font-family: var(--font-display); font-size: 34px; line-height: 42px; font-weight: 400; letter-spacing: 0.01em; }
.fs-display { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 400; letter-spacing: -0.01em; }
.fs-latin { font-family: var(--font-latin); font-size: 26px; line-height: 31px; font-weight: 400; letter-spacing: 0.005em; font-style: italic; }
.fs-title { font-family: var(--font-ui); font-size: 20px; line-height: 28px; font-weight: 600; }
.fs-heading { font-family: var(--font-ui); font-size: 15px; line-height: 22px; font-weight: 600; }
.fs-chat { font-family: var(--font-ui); font-size: 15px; line-height: 26px; font-weight: 400; }
.fs-ui { font-family: var(--font-ui); font-size: 13px; line-height: 20px; font-weight: 400; }
.fs-small { font-family: var(--font-ui); font-size: 12px; line-height: 18px; font-weight: 400; }
.fs-label { font-family: var(--font-ui); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.03em; }
.fs-code { font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; font-weight: 400; font-variant-ligatures: none; }