/* ============================================================
   闪电云官网(www)设计变量(Design Tokens)· 芒果云官网 1:1 对齐版
   ------------------------------------------------------------
   依据《芒果云设计系统提取.md》§5.1 官网 shadcn/Tailwind token:
   - 背景/卡片/边框/文字灰阶、圆角(--radius:0.5rem)、阴影、
     字体(Arial / PingFang SC / Microsoft YaHei)对齐芒果云;
   - 主色仍为闪电云品牌蓝 #2563eb(与芒果云官网 --primary 同值);
   - 三色渐变 --grad-primary 与 --glow-blue* 收敛为纯色(官网按钮纯色)。
   注意:本文件为 www 独立副本,app/console 各有自己的 design-tokens.css。
   用法:页面顶部引入 <link rel="stylesheet" href="design-tokens.css">,
   然后直接使用 var(--primary) / hsl(var(--background)) 等变量。
   ============================================================ */

:root {
  /* ---------- shadcn/HSL 三元组(芒果云官网 §5.1 原值,配合 hsl() 使用) ---------- */
  --background: 220 25% 98%;          /* 页面底 ≈ #f9f9fb */
  --foreground: 240 24% 26%;          /* 前景/标题 ≈ #323251 */
  --card-foreground: 240 24% 26%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary-h: 221.2 83.2% 53.3%;     /* = #2563eb,等价于 var(--primary) */
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 222 44% 96%;
  --muted-foreground: 222 15% 43%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border-h: 222 25% 88%;
  --input: 222 25% 88%;
  --ring-h: 221.2 83.2% 53.3%;
  /* ---------- 品牌主色(闪电云品牌蓝,三端统一,不再逐页自定义) ---------- */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-darker: #1e40af;
  --primary-light: #dbeafe;
  --primary-soft: #eff6ff;       /* 品牌色浅底:徽章/选中态/表格悬停 */
  --primary-hover: #1d4ed8;
  --primary-border: #bfdbfe;     /* 品牌色描边:浅蓝卡片/输入聚焦前态 */
  --text-on-primary: #ffffff;

  /* ---------- 辅助色 ---------- */
  --accent: #0ea5e9;             /* 天蓝:数据/科技感点缀 */
  --accent-soft: #ecfeff;
  --success: #16a34a;
  --success-light: #dcfce7;
  --warning: #ea580c;
  --warning-light: #ffedd5;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --info: #64748b;

  /* ---------- 中性色(对齐芒果云官网 shadcn 灰阶) ---------- */
  --text: #323251;                    /* --foreground 240 24% 26% */
  --text-2: #5d6776;                  /* --muted-foreground 222 15% 43% */
  --text-3: #8b95a6;
  --text-on-dark: #e2e8f0;
  --border: #d9dde8;                  /* --border 222 25% 88% */
  --border-strong: #c6ccd8;
  --bg: #f9f9fb;                      /* --background 220 25% 98% */
  --bg-soft: #f2f5f9;                 /* --secondary 210 40% 96.1% */
  --bg-elevated: #ffffff;
  --card: #ffffff;                    /* --card 0 0% 100% */
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;

  /* ---------- 圆角(§5.1:shadcn --radius:0.5rem;卡片 16px 在 www.css 覆盖) ---------- */
  --radius-sm: 8px;
  --radius: 0.5rem;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---------- 阴影(对齐芒果云:轻阴影 + 图卡大阴影 + 悬停抬升) ---------- */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --shadow: 0 1px 2px rgba(15, 23, 42, .06),
            0 10px 28px -14px rgba(15, 23, 42, .14);
  --shadow-hover: 0 6px 18px rgba(37, 99, 235, .09);
  --shadow-card: 0 24px 70px rgba(50, 50, 81, .16);
  /* 兼容旧组件命名(下拉/浮层投影) */
  --shadow-3d: 0 10px 24px -8px rgba(16, 24, 40, .16);

  /* ---------- 间距(4px 基准栅格) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---------- 字体(§5.1:Arial, PingFang SC, Microsoft YaHei) ---------- */
  --font-sans: Arial, "PingFang SC", "Microsoft YaHei", "微软雅黑",
               "Hiragino Sans GB", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: Consolas, "SF Mono", "Cascadia Code", Menlo,
               "Courier New", monospace;

  /* ---------- 字号 ---------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-hero: 48px;

  /* ---------- 布局 ---------- */
  --container: 1120px;
  --sidebar-w: 220px;
  --header-h: 64px;

  /* ---------- 动效(统一缓动曲线,杜绝忽快忽慢) ---------- */
  --transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
  --transition: .22s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: .35s cubic-bezier(.4, 0, .2, 1);

  /* ---------- 焦点环(键盘可达性 / 无障碍) ---------- */
  --ring: 0 0 0 4px rgba(37, 99, 235, .14);
  --ring-danger: 0 0 0 4px rgba(220, 38, 38, .14);

  /* ---------- 层级(z-index 集中管理,避免互相遮盖冲突) ---------- */
  --z-sticky: 100;
  --z-nav: 900;
  --z-dropdown: 950;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---------- 现代效果:毛玻璃 / 渐变 / 光影(适度使用) ---------- */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-blur: blur(16px) saturate(180%);
  --glass-dark-bg: rgba(15, 23, 42, .55);

  /* §5.1/P4-20:芒果云官网按钮为纯色 bg-primary,去除三色渐变与蓝色辉光 */
  --grad-primary: var(--primary);
  --grad-hero: linear-gradient(145deg, hsl(var(--muted)), hsl(var(--background)));
  --grad-text: var(--primary);
  --grad-sidebar: linear-gradient(180deg, #0f172a 0%, #111c33 100%);

  --glow-blue: none;
  --glow-blue-strong: none;
}

/* ---------- 全局基础微调(三端共享,仅做增量增强,不覆盖各端布局) ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 品牌色文本选中效果,强化全站统一观感 */
::selection {
  background: rgba(37, 99, 235, .16);
  color: var(--primary-darker);
}

/* 统一键盘焦点样式(§5.1:focus-visible 2px 主色描边 + 3px offset) */
:focus-visible {
  outline: 2px solid hsl(var(--primary-h));
  outline-offset: 3px;
}

/* 克制的细滚动条(三端统一,Chrome/Edge 生效;Firefox 忽略不影响使用) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* 用户触发了系统级「减弱动态效果」时,关闭过渡与动画(无障碍) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}