/* ============================================================
   LLM RELAY · 170hx 中转站 —— 设计 token
   视觉语言参考 DeepSeek 官网(色板/圆角/排版), 品牌与文案自有。
   ============================================================ */
:root {
  color-scheme: light;

  /* 品牌蓝(官网 bundle 真源) */
  --brand:        #4d6bfe;
  --brand-deep:   #3964fe;
  --brand-soft:   #8fa5ff;
  --brand-tint:   rgba(77, 107, 254, .08);
  --brand-tint-2: rgba(77, 107, 254, .14);

  /* 中性 bluish 阶 */
  --n-50:  #f9fafb;
  --n-100: #f1f3f5;
  --n-150: #e9ebee;
  --n-200: #e2e5e9;
  --n-300: #d4d8de;
  --n-400: #b2b8c0;
  --n-500: #8a9099;
  --n-600: #5f6570;
  --n-700: #3d444e;
  --n-800: #23262d;
  --n-900: #14151a;
  --n-950: #0f1115;

  /* 表面 */
  --bg:       #f9f8f8;
  --bg-2:     #ffffff;
  --bg-3:     #f1f2f4;
  --sidebar:  #ebeef2;
  --card:     #ffffff;
  --card-border: #e6e8eb;
  --input-bg: #ffffff;
  --hover:    rgba(15, 17, 21, .05);
  --active:   rgba(15, 17, 21, .08);
  --code-bg:  #0f1115;
  --code-fg:  #e6edf3;

  /* 文本 */
  --fg:    #14151a;
  --fg-2:  #5f6570;
  --fg-3:  #8a9099;
  --on-brand: #ffffff;

  /* 主 CTA: 浅色=近黑胶囊, 暗色反白(DeepSeek 式) */
  --cta:       #1a1615;
  --cta-fg:    #ffffff;
  --cta-hover: #000000;

  /* 状态 */
  --ok:   #22c55e;
  --warn: #f59e0b;
  --err:  #ef4444;
  --ok-tint:   rgba(34, 197, 94, .12);
  --warn-tint: rgba(245, 158, 11, .14);
  --err-tint:  rgba(239, 68, 68, .12);

  /* 圆角 */
  --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 100px;

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
          "DM Sans", "Inter", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;

  --shadow-sm: 0 1px 2px rgba(15, 17, 21, .05);
  --shadow-md: 0 4px 16px rgba(15, 17, 21, .08);
  --shadow-lg: 0 12px 40px rgba(15, 17, 21, .12);
  --header-h: 60px;

  /* hero 顶部渐变(官网 #9cc1e7 → transparent) */
  --hero-grad: linear-gradient(180deg, #9cc1e7 0%, rgba(156, 193, 231, .55) 45%, transparent 100%);
}

[data-theme="dark"] {
  color-scheme: dark;

  --brand:      #6799fe;
  --brand-deep: #4d6bfe;
  --brand-soft: #7da5ff;
  --brand-tint:   rgba(103, 153, 254, .12);
  --brand-tint-2: rgba(103, 153, 254, .20);

  --n-50:  #111214;
  --n-100: #16171a;
  --n-150: #1b1b1d;
  --n-200: #242527;
  --n-300: #313237;
  --n-400: #4a4c52;
  --n-500: #6a6d75;
  --n-600: #9a9ea7;
  --n-700: #c3c7ce;
  --n-800: #e2e4e8;
  --n-900: #eceef1;
  --n-950: #f2f3f5;

  --bg:       #0a0a0a;
  --bg-2:     #101011;
  --bg-3:     #161617;
  --sidebar:  #1b1b1c;
  --card:     #141415;
  --card-border: #26272a;
  --input-bg: #1c1c1e;
  --hover:    rgba(255, 255, 255, .06);
  --active:   rgba(255, 255, 255, .10);
  --code-bg:  #0d0d0f;
  --code-fg:  #d7dee6;

  --fg:    #f2f3f5;
  --fg-2:  #9a9ea7;
  --fg-3:  #6a6d75;

  --cta:       #ffffff;
  --cta-fg:    #14151a;
  --cta-hover: #d9d9d9;

  --ok-tint:   rgba(34, 197, 94, .16);
  --warn-tint: rgba(245, 158, 11, .18);
  --err-tint:  rgba(239, 68, 68, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);

  --hero-grad: linear-gradient(180deg, #1d3a5f 0%, rgba(29, 58, 95, .4) 45%, transparent 100%);
}