/*
 * TG管理系统 · 设计令牌（Gatekeeper Console）
 * 其他站点复用时，整份复制本文件，再按需改 --brand / --accent / --grad-brand 三个品牌色。
 * 完整说明见 docs/UI设计规范.md。
 */

:root {
  color-scheme: light;

  /* 字体 */
  --font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --lh: 1.6;

  /* 间距：4 的倍数 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* 圆角 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* 布局 */
  --rail-w: 248px;
  --topbar-h: 72px;
  --content-max: 1320px;
  --gutter: clamp(16px, 3vw, 36px);

  /* 动效 */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* 品牌 */
  --brand: #3466f6;
  --brand-strong: #2550d8;
  --brand-soft: #ecf1ff;
  --brand-ring: rgba(52, 102, 246, .22);
  --accent: #18b4e8;
  --grad-brand: linear-gradient(135deg, #3466f6 0%, #18b4e8 100%);
  /* 深色底上的品牌高光（侧栏选中图标、Hero 小标题），由品牌色自动推导 */
  --brand-tint: color-mix(in srgb, var(--brand) 45%, #fff);
  --accent-tint: color-mix(in srgb, var(--accent) 60%, #fff);

  /* 中性色 */
  --bg: #f3f5fa;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #eef2f8;
  --line: #e5eaf2;
  --line-strong: #d5dde9;
  --text: #0f1b2d;
  --text-2: #4a5a73;
  --text-3: #8592a8;

  /* 语义色 */
  --ok: #0f9f72;
  --ok-soft: #e6f7f0;
  --warn: #c27803;
  --warn-soft: #fff4de;
  --danger: #d93650;
  --danger-soft: #fdecef;
  --violet: #7356e8;
  --violet-soft: #f0edfe;
  --teal: #0c9aa8;
  --teal-soft: #e3f6f8;
  --gray-soft: #eef1f6;

  /* 侧栏：两种主题下都保持深色 */
  --rail-bg: #0a1222;
  --rail-bg-2: #0e1830;
  --rail-text: #c3cee0;
  --rail-dim: #6e7d97;
  --rail-line: rgba(255, 255, 255, .07);
  --rail-active: rgba(52, 102, 246, .18);

  /* 深色画面：Hero、登录页左栏、批量操作条、提示气泡 */
  --ink: #0b1324;
  --ink-grad:
    radial-gradient(70% 120% at 100% 0%, rgba(24, 180, 232, .30), transparent 60%),
    radial-gradient(60% 120% at 0% 100%, rgba(52, 102, 246, .42), transparent 65%),
    linear-gradient(135deg, #0a1328 0%, #0f1e3f 60%, #13285a 100%);

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(15, 27, 45, .05);
  --shadow-2: 0 10px 28px -12px rgba(15, 27, 45, .22), 0 2px 6px -2px rgba(15, 27, 45, .06);
  --shadow-3: 0 28px 64px -16px rgba(10, 18, 34, .38);
}

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

  --brand: #5b86ff;
  --brand-strong: #7a9dff;
  --brand-soft: rgba(91, 134, 255, .14);
  --brand-ring: rgba(91, 134, 255, .35);
  --accent: #2cc4f0;
  --grad-brand: linear-gradient(135deg, #4a78ff 0%, #22b8ea 100%);

  --bg: #090e18;
  --surface: #101725;
  --surface-2: #141c2c;
  --surface-3: #1a2436;
  --line: #1e293b;
  --line-strong: #2a374d;
  --text: #e7edf6;
  --text-2: #a6b3c7;
  --text-3: #6f7e96;

  --ok: #2bc594;
  --ok-soft: rgba(43, 197, 148, .13);
  --warn: #f0b24b;
  --warn-soft: rgba(240, 178, 75, .13);
  --danger: #ff6b7d;
  --danger-soft: rgba(255, 107, 125, .13);
  --violet: #a48bff;
  --violet-soft: rgba(164, 139, 255, .14);
  --teal: #35d0c2;
  --teal-soft: rgba(53, 208, 194, .13);
  --gray-soft: rgba(148, 163, 184, .12);

  --rail-bg: #060a13;
  --rail-bg-2: #0a101e;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 28px -10px rgba(0, 0, 0, .6);
  --shadow-3: 0 28px 64px -16px rgba(0, 0, 0, .7);
}

/* 语义色调：任何组件加 data-tone，内部用 var(--tone) / var(--tone-soft) 取色 */
[data-tone="brand"] { --tone: var(--brand); --tone-soft: var(--brand-soft); }
[data-tone="ok"] { --tone: var(--ok); --tone-soft: var(--ok-soft); }
[data-tone="warn"] { --tone: var(--warn); --tone-soft: var(--warn-soft); }
[data-tone="danger"] { --tone: var(--danger); --tone-soft: var(--danger-soft); }
[data-tone="violet"] { --tone: var(--violet); --tone-soft: var(--violet-soft); }
[data-tone="teal"] { --tone: var(--teal); --tone-soft: var(--teal-soft); }
[data-tone="gray"] { --tone: var(--text-3); --tone-soft: var(--gray-soft); }