/* 设计变量：颜色、字体、阴影和色相标记。数值来自原稿最终生效的样式，浅色和深色各一套 */
@font-face {
  font-family: "Inter";
  src: url(../fonts/inter-latin-wght.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url(../fonts/bricolage-grotesque-latin-wght.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

.fx {
  --canvas: #eef2f1;
  --surface: #ffffff;
  --surface-2: #f5f8f7;
  --surface-3: #e9efed;
  --line: #e1e8e6;
  --line-strong: #cfd9d6;
  --ink: #0f1b1a;
  --muted: #576664;
  --brand: #0b7a72;
  --brand-ink: #0a5f58;
  --brand-tint: #ddf3ef;
  --on-brand: #ffffff;
  --accent: #6d4fe0;
  --accent-tint: #f3efff;
  --accent-line: #c4b5fd;
  --grad: linear-gradient(90deg,#7c5cf0,#3b82f6);
  --signal: #c2410c;
  --on-signal: #ffffff;
  --warn: #9a3412;
  --warn-tint: #fdece1;
  --ok: #0a5f58;
  --ok-tint: #ddf3ef;
  --lime: #d9f99d;
  --lime-ink: #3f6212;
  --mark: #ddf3ef;
  --logo-ring: rgba(0,0,0,.06);
  --hero-a: #f1ecff;
  --hero-b: #e6f0ff;
  --tg-top: #f2f8ff;
  --tg-line: #d6e8fb;
  --tg-type-bg: #e0f2fe;
  --tg-type-ink: #075985;
  --own-a: #faf8ff;
  --own-b: #f2f7ff;
  --usdt-bg: #effaf6;
  --usdt-line: #bfe9dc;
  --usdt-ink: #0f5132;
  --shadow-sm: 0 1px 2px rgba(16,40,36,.05),0 1px 1px rgba(16,40,36,.03);
  --shadow-md: 0 2px 6px rgba(16,40,36,.04),0 12px 32px -12px rgba(16,40,36,.16);
  --shadow-lg: 0 24px 60px -20px rgba(16,40,36,.28);
  --h0b:#e3eefc;
  --h0i:#1d4f91;
  --h1b:#dbf3ee;
  --h1i:#0b6a63;
  --h2b:#e3f4dc;
  --h2i:#2f6a2a;
  --h3b:#fbf0d4;
  --h3i:#7a5200;
  --h4b:#fde6d8;
  --h4i:#9a3412;
  --h5b:#fce2e8;
  --h5i:#9d1f45;
  --h6b:#ebe6fb;
  --h6i:#4b3a9c;
  --h7b:#e7ecef;
  --h7i:#334155;
  --sans: "Inter","Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --display: "Bricolage Grotesque","Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 22px;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.fx[data-theme="dark"] {
  --canvas: #0a0f0f;
  --surface: #121a1a;
  --surface-2: #172121;
  --surface-3: #1e2a2a;
  --line: #233131;
  --line-strong: #2f4040;
  --ink: #e9f1ef;
  --muted: #98a8a5;
  --brand: #3ad1c3;
  --brand-ink: #7fe6da;
  --brand-tint: #0f3532;
  --on-brand: #04221f;
  --accent: #c6bbf5;
  --accent-tint: #241d4d;
  --accent-line: #4b3a9c;
  --signal: #fb923c;
  --on-signal: #1a0a02;
  --warn: #fdba74;
  --warn-tint: #3a1d0b;
  --ok: #7fe6da;
  --ok-tint: #0f3532;
  --lime: #2c3d12;
  --lime-ink: #d9f99d;
  --mark: #0f3532;
  --logo-ring: rgba(255,255,255,.08);
  --hero-a: #1d1840;
  --hero-b: #10263f;
  --tg-top: #121f2b;
  --tg-line: #233131;
  --tg-type-bg: #0c3550;
  --tg-type-ink: #7dd3fc;
  --own-a: #1d1840;
  --own-b: #1a2340;
  --usdt-bg: #0f2d24;
  --usdt-line: #1f5a48;
  --usdt-ink: #8fe3c6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
  --h0b:#13294a;
  --h0i:#a9cbf5;
  --h1b:#0e3532;
  --h1i:#7ee0d6;
  --h2b:#183418;
  --h2i:#a6dba0;
  --h3b:#3a2c0a;
  --h3i:#f3d08a;
  --h4b:#3a1c0a;
  --h4i:#fdba74;
  --h5b:#3d1220;
  --h5i:#f6a8bd;
  --h6b:#241d4d;
  --h6i:#c6bbf5;
  --h7b:#1f2a37;
  --h7i:#c5d0dc;
}

.h0 {
  --hb: var(--h0b);
  --hi: var(--h0i);
  --g1: #60a5fa;
  --g2: #2563eb;
}

.h1 {
  --hb: var(--h1b);
  --hi: var(--h1i);
  --g1: #2dd4bf;
  --g2: #0d9488;
}

.h2 {
  --hb: var(--h2b);
  --hi: var(--h2i);
  --g1: #4ade80;
  --g2: #16a34a;
}

.h3 {
  --hb: var(--h3b);
  --hi: var(--h3i);
  --g1: #fcd34d;
  --g2: #f59e0b;
}

.h4 {
  --hb: var(--h4b);
  --hi: var(--h4i);
  --g1: #fdba74;
  --g2: #ea580c;
}

.h5 {
  --hb: var(--h5b);
  --hi: var(--h5i);
  --g1: #fb7185;
  --g2: #e11d48;
}

.h6 {
  --hb: var(--h6b);
  --hi: var(--h6i);
  --g1: #a78bfa;
  --g2: #7c3aed;
}

.h7 {
  --hb: var(--h7b);
  --hi: var(--h7i);
  --g1: #94a3b8;
  --g2: #475569;
}

/* 无 JS 时也跟随系统深色：有脚本时 data-theme 已写好，这段不生效 */
@media (prefers-color-scheme: dark) {
  html.fx:not([data-theme]) {
    --canvas: #0a0f0f;
    --surface: #121a1a;
    --surface-2: #172121;
    --surface-3: #1e2a2a;
    --line: #233131;
    --line-strong: #2f4040;
    --ink: #e9f1ef;
    --muted: #98a8a5;
    --brand: #3ad1c3;
    --brand-ink: #7fe6da;
    --brand-tint: #0f3532;
    --on-brand: #04221f;
    --accent: #c6bbf5;
    --accent-tint: #241d4d;
    --accent-line: #4b3a9c;
    --signal: #fb923c;
    --on-signal: #1a0a02;
    --warn: #fdba74;
    --warn-tint: #3a1d0b;
    --ok: #7fe6da;
    --ok-tint: #0f3532;
    --lime: #2c3d12;
    --lime-ink: #d9f99d;
    --mark: #0f3532;
    --logo-ring: rgba(255,255,255,.08);
    --hero-a: #1d1840;
    --hero-b: #10263f;
    --tg-top: #121f2b;
    --tg-line: #233131;
    --tg-type-bg: #0c3550;
    --tg-type-ink: #7dd3fc;
    --own-a: #1d1840;
    --own-b: #1a2340;
    --usdt-bg: #0f2d24;
    --usdt-line: #1f5a48;
    --usdt-ink: #8fe3c6;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
    --h0b:#13294a;
    --h0i:#a9cbf5;
    --h1b:#0e3532;
    --h1i:#7ee0d6;
    --h2b:#183418;
    --h2i:#a6dba0;
    --h3b:#3a2c0a;
    --h3i:#f3d08a;
    --h4b:#3a1c0a;
    --h4i:#fdba74;
    --h5b:#3d1220;
    --h5i:#f6a8bd;
    --h6b:#241d4d;
    --h6i:#c6bbf5;
    --h7b:#1f2a37;
    --h7i:#c5d0dc;
  }
}