/* ==========================================================================
   Nullius 设计系统 v4 · Tokens
   --------------------------------------------------------------------------
   三层架构：
     1. 原语层（本文件 :root 上半）——色板与尺度，不含语义，不直接被组件引用
     2. 语义层（:root/light 与 [data-theme=dark]）——组件唯一入口，只引用原语
     3. 组件层（components.css）——组件角色变量，仅引用语义层

   规则：
   - 组件样式只允许引用语义层与组件层变量，禁止直接写 hex。
   - 迁移期旧名别名不进入本文件；适配层单独建文件，用完即删。
   - 新增 token 必须在规范站"色彩与表面"章登记用途后才可使用。
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------ *
   * 原语 · Petrol 品牌色阶（数字越大越深）
   * ------------------------------------------------------------------ */
  --petrol-50:#F0F7F6;    /* hero 渐变末端、行 hover */
  --petrol-100:#E0EFED;   /* feature 卡底、accent-soft */
  --petrol-200:#C9E3E0;
  --petrol-300:#7FAFAD;   /* 柔和强调、描边拱；不作白底正文 */
  --petrol-400:#4E918F;
  --petrol-500:#2C7D7C;
  --petrol-600:#146B70;   /* 品牌主色（浅色主题 accent） */
  --petrol-700:#0E565A;   /* hover / 深色强调 */
  --petrol-800:#0B464A;
  --petrol-900:#0A383C;   /* feature 面文字、pressed */
  --petrol-950:#07262A;
  --petrol-bright:#81CAC8;        /* 深色主题 accent */
  --petrol-bright-hover:#9BD9D6;
  --petrol-bright-pressed:#6CB8B8;
  --petrol-glow:#D6F1EC;          /* 深色 feature 面文字 */

  /* ------------------------------------------------------------------ *
   * 原语 · Fog 中性阶（浅色主题的表面与文字）
   * ------------------------------------------------------------------ */
  --fog-25:#FAFBFB;     /* canvas */
  --fog-50:#F4F7F6;
  --fog-100:#EEF3F2;    /* surface-group、分隔 */
  --fog-150:#E4EDEB;
  --fog-200:#D5E1DE;    /* border */
  --fog-300:#B7CCC8;
  --fog-400:#8CA6A2;
  --fog-450:#73888A;    /* 控件边框（对比 ≥3:1） */
  --fog-500:#5F7274;    /* muted 文字（白底 ≥4.5:1） */
  --fog-600:#455F62;    /* secondary 文字 */
  --fog-700:#3A5452;
  --fog-800:#2C4144;
  --fog-900:#1C2B2D;    /* 主文字 */

  /* ------------------------------------------------------------------ *
   * 原语 · Pine 深色阶（深色主题的表面与文字）
   * ------------------------------------------------------------------ */
  --pine-100:#E7F0EF;   /* 深色主文字 */
  --pine-200:#B8CDCD;   /* 深色 secondary */
  --pine-300:#9BB3B4;   /* 深色 muted */
  --pine-400:#719194;   /* 深色控件边框 */
  --pine-500:#344E51;   /* 深色 border */
  --pine-600:#2A3B3E;   /* 深色分隔 */
  --pine-700:#203F42;   /* 深色 feature 底 */
  --pine-750:#223437;   /* 深色 surface-group */
  --pine-800:#1C3033;   /* 深色 surface-subtle */
  --pine-850:#182629;   /* 深色 surface */
  --pine-900:#101A1C;   /* 深色 canvas */

  /* ------------------------------------------------------------------ *
   * 原语 · 状态色（light / dark 成对）
   * ------------------------------------------------------------------ */
  --jade-600:#247958;   --jade-300:#83D4AE;   /* 收益 / 正向 */
  --clay-600:#B44D48;   --clay-300:#F09F99;   /* 亏损 / 负向 */
  --amber-700:#856327;  --amber-300:#E0BF7F;  /* 警告 */

  /* ------------------------------------------------------------------ *
   * 原语 · 图表类别色（品牌派生）
   * 规则：以 petrol 为锚（h182），恒定 s≈.3–.4 / l≈.42–.45（深色 l≈.65–.72），
   *       色相旋转取类别色；BTC 按市场惯例固定金色（c3）。
   *       颜色随实体固定，不随排名变化；Top5 + 其他。
   *       资产固定映射：BTC=c3、ETH=c1、USDT=c2、BNB=c5；其余沿用固定哈希色槽。
   * ------------------------------------------------------------------ */
  --chart-l-1:#456891;  --chart-l-2:#3C8677;  --chart-l-3:#947E42;
  --chart-l-4:#78598C;  --chart-l-5:#8C586A;  --chart-l-other:#747F89;
  --chart-d-1:#96ACC4;  --chart-d-2:#7DBFB2;  --chart-d-3:#C8B684;
  --chart-d-4:#BBA8C7;  --chart-d-5:#C79EAC;  --chart-d-other:#9BA9B2;

  /* ------------------------------------------------------------------ *
   * 原语 · 尺度（主题无关）
   * ------------------------------------------------------------------ */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;

  /* 圆角谱系：全产品只用这几档。feature/hero 即"拱形顶角" */
  --radius-sm:6px;                          /* chip、小徽章 */
  --radius-md:10px;                         /* 按钮、输入 */
  --radius-lg:14px;                         /* 浮层、tooltip */
  --radius-panel:18px;                      /* 普通面板 */
  --radius-feature:36px 36px 12px 12px;     /* 重点卡：拱形顶角 */
  --radius-hero:44px 44px 14px 14px;        /* hero 卡：大拱 */
  --radius-pill:999px;

  /* 字号角色（数字一律 tabular-nums lining-nums） */
  --type-display:40px;  --leading-display:48px;
  --type-display-compact:32px; --leading-display-compact:40px;
  --type-display-unit:14px; --type-display-unit-compact:12px;
  --type-page:28px;     --leading-page:36px;
  --type-amount:30px;   --leading-amount:36px;
  --type-attribution:24px; --leading-attribution:30px;
  --type-section:16px;  --leading-section:24px;
  --type-body:14px;     --leading-body:22px;
  --type-table:13px;    --leading-table:20px;
  --type-caption:12px;  --leading-caption:18px;

  /* 控件高度：全产品两档 */
  --control-sm:32px;
  --control-md:40px;

  /* 动效 */
  --motion-feedback:120ms;   /* hover、按下 */
  --motion:160ms;            /* 切换、分段控件 */
  --motion-overlay:180ms;    /* tooltip、popover */
  --motion-message:160ms;    /* 新消息仅首次淡入 */
  --motion-typing:1200ms;    /* 等待状态循环 */
  --motion-panel:220ms;      /* dialog、抽屉 */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-arch:cubic-bezier(.34,1.2,.4,1);   /* 品牌回弹，仅限单一位移入场 */

  /* 结构 */
  --nav-w:68px;
  --page-max:1200px;
  --z-nav:100; --z-overlay:200; --z-toast:300;

  --sans:Inter,'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --number-font:var(--sans);
  --code-font:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

/* ==========================================================================
   语义层 · 浅色（默认）
   ========================================================================== */
:root,[data-theme=light]{
  color-scheme:light;

  --canvas:var(--fog-25);
  --surface:#FFFFFF;
  --surface-overlay:#FFFFFF;   /* e3 浮层表面（menu/popover/tooltip/dialog） */
  --surface-subtle:var(--petrol-50);
  --surface-group:var(--fog-100);
  --surface-feature:linear-gradient(135deg,var(--petrol-100),var(--petrol-50));
  --surface-feature-solid:var(--petrol-100);
  --surface-inverse:linear-gradient(150deg,var(--petrol-600),var(--petrol-700));

  --foreground:var(--fog-900);
  --foreground-secondary:var(--fog-600);
  --foreground-muted:var(--fog-500);
  --foreground-feature:var(--petrol-900);
  --on-accent:#FFFFFF;
  --on-inverse-secondary:var(--petrol-200);

  --border:var(--fog-200);
  --divider:var(--fog-100);
  --control-border:var(--fog-450);

  --accent:var(--petrol-600);
  --accent-hover:var(--petrol-700);
  --accent-pressed:var(--petrol-900);
  --accent-soft:var(--petrol-100);
  --focus:var(--petrol-600);

  --positive:var(--jade-600);
  --negative:var(--clay-600);
  --warning:var(--amber-700);

  /* Contribution shares: larger shares are darker in both themes. */
  --chart-contribution-gain-soft:var(--jade-300);
  --chart-contribution-gain-deep:var(--jade-600);
  --chart-contribution-loss-soft:var(--clay-300);
  --chart-contribution-loss-deep:var(--clay-600);

  --chart-1:var(--chart-l-1); --chart-2:var(--chart-l-2); --chart-3:var(--chart-l-3);
  --chart-4:var(--chart-l-4); --chart-5:var(--chart-l-5); --chart-other:var(--chart-l-other);
  --chart-price:var(--petrol-600);
  --chart-income:var(--petrol-400);
  --chart-grid:var(--fog-200);

  /* 净收益图表：零上品牌色、零下语义色；货币文本始终用 profit/loss */
  --chart-return-positive:var(--accent);
  --chart-return-negative:var(--negative);

  --shadow-float:0 4px 16px rgba(10,56,60,.06);
  --shadow-overlay:0 16px 48px rgba(10,56,60,.12),0 2px 6px rgba(10,56,60,.04);
  --arch-glow:0 12px 40px -8px rgba(20,107,112,.18),0 2px 8px rgba(20,107,112,.06);
  --backdrop:rgba(10,26,28,.35);
}

/* ==========================================================================
   语义层 · 深色（换映射，不换结构）
   ========================================================================== */
[data-theme=dark]{
  color-scheme:dark;

  --canvas:var(--pine-900);
  --surface:var(--pine-850);
  --surface-overlay:var(--pine-750);   /* 深色下浮层更亮：层级靠明度差而非阴影 */
  --surface-subtle:var(--pine-800);
  --surface-group:var(--pine-750);
  --surface-feature:linear-gradient(135deg,var(--pine-700),var(--pine-800));
  --surface-feature-solid:var(--pine-700);
  --surface-inverse:linear-gradient(150deg,var(--petrol-700),var(--petrol-800));

  --foreground:var(--pine-100);
  --foreground-secondary:var(--pine-200);
  --foreground-muted:var(--pine-300);
  --foreground-feature:var(--petrol-glow);
  --on-accent:#10272A;
  --on-inverse-secondary:var(--petrol-200);

  --border:var(--pine-500);
  --divider:var(--pine-600);
  --control-border:var(--pine-400);

  --accent:var(--petrol-bright);
  --accent-hover:var(--petrol-bright-hover);
  --accent-pressed:var(--petrol-bright-pressed);
  --accent-soft:var(--pine-700);
  --focus:var(--petrol-bright);

  --positive:var(--jade-300);
  --negative:var(--clay-300);
  --warning:var(--amber-300);

  --chart-1:var(--chart-d-1); --chart-2:var(--chart-d-2); --chart-3:var(--chart-d-3);
  --chart-4:var(--chart-d-4); --chart-5:var(--chart-d-5); --chart-other:var(--chart-d-other);
  --chart-price:var(--petrol-bright);
  --chart-income:#498B8F;
  --chart-grid:var(--pine-500);

  --chart-return-positive:var(--accent);
  --chart-return-negative:var(--negative);

  --shadow-float:0 4px 16px rgba(0,0,0,.16);
  --shadow-overlay:0 16px 48px rgba(0,0,0,.35);
  --arch-glow:0 12px 40px -8px rgba(0,0,0,.4);
  --backdrop:rgba(4,10,11,.55);
}

/* 减少动态：系统优先，时长归零（保留颜色/焦点反馈） */
@media (prefers-reduced-motion:reduce){
  :root{
    --motion-feedback:0ms; --motion:0ms; --motion-overlay:0ms; --motion-panel:0ms; --motion-message:0ms;
  }
}