/* =============================================================================
   链桥 ChainBridge —— 设计令牌（硬规矩 A：drpc.org 风格）
   =============================================================================
   【本文件的性质】本文件是**逐条移植**自 drpc.org 线上 CSS 的变量表，不是原创设计。
   移植来源（2026-10-26 实测抓取）：
     https://drpc.org/_next/static/css/a147f9c4be3ce390.css   （:root 全量变量）
     https://drpc.org/_next/static/css/30d97399e7ca5b02.css   （字体与阴影）
     https://drpc.org/_next/static/css/51c2cf39fb072b51.css   （营销组件）

   【硬规矩】不允许替换任何基线变量的值。需要新语义时，只在文件末尾的
   「语义别名」区新增 `--cs-*` 变量指向已有 token，不允许改写 `--primary` 之类。

   【为什么变量名保留 drpc 的驼峰/连字符混合写法】因为验收脚本要拿本文件与
   docs/02-前端设计规范-drpc风格.md §1 的表格**逐条比对**；改名会让比对失效，
   也会让后续接手的开发者无法一眼对应到线上来源。
   ============================================================================= */

/* 自托管字体（Inter / Space Grotesk / JetBrains Mono 的 latin 子集），
   由 scripts/fetch-fonts.js 生成。必须放在最前面：@import 只允许出现在
   其它规则之前。站点 CSP 是 default-src 'self'，所以不能引用外部字体域名。 */
@import url("fonts.css");

:root {
  /* ---------------------------------------------------------------------------
     ① 品牌与语义色（drpc.org `:root` 原样）
     --------------------------------------------------------------------------- */
  --primary: #41e278;
  --primaryLighter: rgba(65,226,120,.5);
  --primary08: rgba(65,226,120,.08);
  --primaryLight: rgba(65,226,120,.1);
  --primaryTransparent: rgba(65,226,120,.12);
  --primaryDarkForest: #17813b;
  --primaryDark: #2b904d;
  --primaryHover: #64e791;
  --primaryPressed: #20d45e;
  --primaryDisabled: #272728;

  /* ② 文本 */
  --textPrimary: #ffffff;
  --textPrimaryMuted: #d0d0d0;
  --textSecondary: #8c8c8c;
  --textSecondaryV2: #999;
  --textSecondaryBright: rgba(255,255,255,.7);
  --textTertiary: #fafafa;
  --textQuaternary: rgba(255,255,255,.08);
  --textNegative: #212121;

  /* ③ 背景 */
  --background: #0f0f0f;
  --backgroundSecondary: #1b1b1c;
  --backgroundTertiary: #131314;
  --backgroundNegative: #fafafa;
  --backgroundLandingDark: #141415;
  --backgroundSurface: #272728;
  --backgroundMuted: #141415;
  --backgroundLandingLight: #edeef0;
  --surfaceMuted: #1d1d1e;
  --landingReviewsPrimary: #1d1d1e;
  --mainPageBg: rgba(10,10,10,1);

  /* ④ 边框与分隔 */
  --divider: rgba(255,255,255,.1);
  --border: rgba(255,255,255,.1);
  --borderDarkGray: #444444;
  --borderSecondaryWhite: rgba(255,255,255,.2);
  --borderSecondary: rgba(255,255,255,.06);
  --borderMuted: #3d3d3e;
  --borderDarkMuted: #262627;
  --chartLine: rgba(255,255,255,.3);

  /* ⑤ 状态色 */
  --warning: #d4b300;
  --lightYellow: #e8cf47;
  --warningTertiary: rgba(212,179,0,.1);
  --warningQuaternary: rgba(212,179,0,.08);
  --warning015: rgba(212,179,0,.15);
  --error: #ff1100;
  --errorSecondary: rgba(226,65,65,.5);
  --errorBackgroundLight: rgba(226,65,65,.12);
  --errorTertiary: rgba(226,65,65,.1);
  --errorQuaternary: rgba(226,65,65,.08);
  --errorQuinary: rgba(226,65,65,.16);
  --errorSenary: rgba(226,65,65,.32);
  --contentNegativeText: #f10;
  --coral: #f87c74;

  /* ⑥ 强调与营销色 */
  --badgePrimary: #6e97ff;
  --backGroundBadgePrimary: rgba(110,151,255,.16);
  --accentYellow: #ffdd65;
  --accentPink: #ff65b8;
  --blueMarketing: #65daff;
  --purple: #7937ff;
  --nodecorePrimary: #ff44b1;
  --growthPlanGradient: linear-gradient(267deg,#187aed,#bf1fe8 99.72%);

  /* ⑦ 表单 */
  --inputBackground: rgba(0,0,0,.2);
  --inputBackgroundHex: #161616;
  --inputBorder: #2d2d2d;
  --inputBorderActive: rgba(255,255,255,.3);
  --inputBorderActive2: #515152;
  --inputPlaceholder: rgba(255,255,255,.3);
  --selectItemActiveBackground: rgba(255,255,255,.08);
  --dropdownBackground: #1d1d1e;
  --dropdownBorder: #2c2c2c;
  --headerPopoverBg: rgba(0,0,0,.8);
  --chainlistPopoverBg: rgba(0,0,0,.95);

  /* ⑧ 按钮 */
  --buttonBgSecondary: rgba(255,255,255,.08);
  --buttonBgSecondaryHover: rgba(255,255,255,.08);
  --buttonBgSecondaryHex: #2d2d2e;

  /* ⑨ 表格 */
  --tableAccordionActiveBg: rgba(0,0,0,.1);
  --billingTableBorder: rgba(255,255,255,.3);

  /* ⑩ 白色透明度阶 */
  --white04: rgba(255,255,255,.04);
  --white05: rgba(255,255,255,.05);
  --white08: rgba(255,255,255,.08);
  --white12: rgba(255,255,255,.12);

  /* ⑪ 运维状态（状态页 / 节点健康） */
  --uptimeGood: #61b175;
  --uptimeLagging: #d8c03f;
  --uptimeUnavailable: #d6362b;
  --uptimeNotConnected: #9e9ea380;

  /* ⑫ 阴影 */
  --boxShadow: 0px 4px 24px 0px rgba(0,0,0,.35);
  --modalOverlay: rgba(49,49,49,.5);
  --shadow-color: #0a0a0a;
  --black: #000;

  /* ⑬ drpc 的内容层语义（按钮文字色等） */
  --Content-primary_text: #fff;
  --Content-primary_text_muted: #d0d0d0;
  --Content-secondary_text: #999;
  --Content-secondary_text_muted: #6b6b6b;
  --Content-primary_button_text: #212121;
  --Content-alert_text: #e8cf47;
  --Content-negative_text: #f87c74;
  --Content-text_disabled: #575656;
  --Icon-secondary: #a0a8b5;

  /* ---------------------------------------------------------------------------
     ⑭ 字号与行高（drpc.org 全表）
     --------------------------------------------------------------------------- */
  --Font-size-text-50: 10px;
  --Font-size-text-100: 12px;
  --Font-size-text-200: 14px;
  --Font-size-text-300: 16px;
  --Font-size-text-400: 18px;
  --Font-size-text-500: 20px;
  --Font-size-header-100: 24px;
  --Font-size-header-200: 28px;
  --Font-size-header-300: 32px;
  --Font-size-header-400: 36px;
  --Font-size-header-500: 48px;
  --Font-size-header-600: 60px;
  --Font-size-header-700: 72px;
  --Font-size-header-800: 80px;
  --Font-size-header-900: 128px;

  --Line-height-text-50: 10px;
  --Line-height-text-100: 12px;
  --Line-height-text-200: 14px;
  --Line-height-text-300: 16px;
  --Line-height-text-400: 18px;
  --Line-height-text-500: 20px;
  --Line-height-header-100: 24px;
  --Line-height-header-200: 28px;
  --Line-height-header-300: 32px;
  --Line-height-header-400: 36px;
  --Line-height-header-500: 48px;
  --Line-height-header-600: 60px;
  --Line-height-header-700: 72px;
  --Line-height-header-800: 128px;
  --Line-height-header-900: 128px;

  /* ---------------------------------------------------------------------------
     ⑮ 圆角（drpc.org）
     --------------------------------------------------------------------------- */
  --Radius-200: 6px;
  --Radius-300: 8px;
  --Radius-400: 12px;
  --Radius-500: 16px;

  /* ---------------------------------------------------------------------------
     ⑯ 栅格与断点（drpc.org）
     --------------------------------------------------------------------------- */
  --landing-page-content-max-width: 1048px;
  --inner-landing-max-width: 1256px;
  --landing-max-width: 1280px;
  --landing-header-height-desktop: 76px;
  --landing-header-height-mobile: 57px;
  --landing-top-banner-height: 40px;
  --landing-header-height: calc(var(--landing-header-height-desktop) + var(--landing-top-banner-height));
  --keys-list-desktop-breakpoint-width: 1330px;

  /* ---------------------------------------------------------------------------
     ⑰ 字体族（drpc 用 Inter + Space Grotesk；这里补齐中文回退栈）
     --------------------------------------------------------------------------- */
  --font-sans: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
  --font-display: "Space Grotesk", "Space Grotesk Fallback", Inter,
    "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---------------------------------------------------------------------------
     ⑱ 语义别名（本项目新增，只做指向，不改基线值）
     --------------------------------------------------------------------------- */
  --cs-page-max: var(--landing-max-width);
  --cs-content-max: var(--landing-page-content-max-width);
  --cs-inner-max: var(--inner-landing-max-width);
  --cs-header-h: var(--landing-header-height-desktop);
  --cs-radius-sm: var(--Radius-200);
  --cs-radius: var(--Radius-300);
  --cs-radius-lg: var(--Radius-400);
  --cs-radius-xl: var(--Radius-500);
  --cs-gap: 24px;
  --cs-section-y: 96px;
  --cs-risk-high: var(--error);
  --cs-risk-medium: var(--warning);
  --cs-risk-low: var(--primary);
  --cs-risk-info: var(--badgePrimary);

  /* 呼吸感与微动效强化 (drpc 质感基线) */
  --glow-primary: rgba(65, 226, 120, 0.16);
  --glow-primary-hover: rgba(65, 226, 120, 0.28);
  --glow-subtle: rgba(255, 255, 255, 0.04);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card-hover: 0 14px 32px -4px rgba(0, 0, 0, 0.5), 0 0 20px var(--glow-primary);
  --shadow-card-subtle: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
}

/* 浅色模式：drpc.org 的营销浅色底（用于文档站、部分对比区块） */
[data-cs-theme="light"] {
  --background: var(--backgroundNegative);
  --backgroundSecondary: #ffffff;
  --backgroundTertiary: var(--backgroundLandingLight);
  --backgroundLandingDark: var(--backgroundLandingLight);
  --backgroundSurface: #e6e8ec;
  --backgroundMuted: #f4f5f7;
  --textPrimary: #212121;
  --textPrimaryMuted: #4d4f66;
  --textSecondary: #6b6b6b;
  --textTertiary: #212121;
  --divider: rgba(0,0,0,.1);
  --border: rgba(0,0,0,.1);
  --borderSecondaryWhite: rgba(0,0,0,.2);
  --inputBackgroundHex: #ffffff;
  --inputBorder: #d5d7e0;
  --inputPlaceholder: rgba(0,0,0,.3);
  --dropdownBackground: #ffffff;
  --dropdownBorder: #e4e7ec;
  --buttonBgSecondary: rgba(0,0,0,.06);
  --buttonBgSecondaryHover: rgba(0,0,0,.1);
  --white04: rgba(0,0,0,.04);
  --white05: rgba(0,0,0,.05);
  --white08: rgba(0,0,0,.08);
  --white12: rgba(0,0,0,.12);
  --boxShadow: 0px 4px 24px 0px rgba(16,24,40,.10);
  --mainPageBg: #f7f8fa;
}