/* ============================================================
农业 SaaS 决策台 · Design Token v1.0
风格：深空蓝暗底 + 玻璃拟态 + 数据流光带（Technology / Data-Dense）
标杆：John Deere Ops Center / Climate FieldView / 托普云农数字底座
------------------------------------------------------------
引入方式（必须放在所有其它 css 之前）：
============================================================ */
:root {
/* ---------- 背景层（3 层景深） ---------- */
--color-bg-primary: #0a0e1a; /* 主背景 · 深空蓝 */
--color-bg-card: rgba(15, 23, 42, 0.7); /* 卡片玻璃 */
--color-bg-overlay: rgba(10, 14, 26, 0.85); /* 浮层 / Modal 遮罩 */
--color-bg-inset: rgba(2, 6, 16, 0.55); /* 内凹槽（行条 / 输入框） */
--color-bg-elevated: rgba(30, 41, 59, 0.72); /* 抬起层（hover / active 卡片） */
/* ---------- 8 级灰阶 ---------- */
--gray-50: #f8fafc;
--gray-100: #e2e8f0;
--gray-300: #94a3b8;
--gray-500: #64748b;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
--gray-950: #060b16;
/* ---------- 文本色（语义别名，禁止直接写死色值） ---------- */
--text-primary: var(--gray-50); /* 标题 / 大数字 */
--text-secondary: var(--gray-100); /* 正文 */
--text-tertiary: var(--gray-300); /* 摘要 / 说明 */
--text-muted: var(--gray-500); /* 时间戳 / 单位 / 占位 */
/* ---------- Brand 色（5 级 · 仅作点缀，不铺面） ---------- */
--brand-50: #fff7ed;
--brand-100: #ffedd5;
--brand-300: #fdba74;
--brand-500: #ff6b35; /* 主橙红 · 强调 / 焦点 / 活跃指示 */
--brand-700: #c2410c;
--brand-alpha-08: rgba(255, 107, 53, 0.08);
--brand-alpha-16: rgba(255, 107, 53, 0.16);
--brand-alpha-32: rgba(255, 107, 53, 0.32);
/* ---------- 语义色（数据状态） ---------- */
--color-info: #38bdf8; /* 气象 / 中性数据流 */
--color-success: #5eead4; /* 正常 / 在线 / 达标 */
--color-warning: #fbbf24; /* 关注 / 临界 */
--color-danger: #ff3366; /* 告警 / 超阈值 */
--color-accent-cyan: #22d3ee; /* 全息图表主色 */
--color-accent-violet: #c13fe0; /* AI / 模型推理链路 */
--info-alpha-12: rgba(56, 189, 248, 0.12);
--success-alpha-12: rgba(94,234,212, 0.12);
--warning-alpha-12: rgba(251, 191, 36, 0.12);
--danger-alpha-12: rgba(255, 51, 102, 0.12);
--violet-alpha-12: rgba(193,63,224, 0.12);
/* ---------- 描边（玻璃边 / 分隔线） ---------- */
--border-glass: rgba(255, 255, 255, 0.08);
--border-glass-strong: rgba(255, 255, 255, 0.14);
--border-hairline: rgba(255, 255, 255, 0.05);
--border-brand: rgba(255, 107, 53, 0.38);
/* ---------- 渐变光带 / 全息底纹 ---------- */
--gradient-flow: linear-gradient(90deg, transparent, #ff6b35, transparent);
--gradient-flow-cyan: linear-gradient(90deg, transparent, #22d3ee, transparent);
--gradient-bg: linear-gradient(135deg, #0a0e1a 0%, #0f172a 50%, #1e293b 100%);
--gradient-card: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.72) 100%);
--gradient-holo: linear-gradient(180deg, rgba(34, 211, 238, 0.28) 0%, rgba(34, 211, 238, 0) 100%);
--gradient-scanline: repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 3px);
--gradient-grid: linear-gradient(rgba(56, 189, 248, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
linear-gradient(90deg, rgba(56, 189, 248, 0.045) 1px, transparent 1px) 0 0 / 32px 32px;
--gradient-fade-bottom: linear-gradient(180deg, transparent 60%, rgba(10, 14, 26, 0.95) 100%);
/* ---------- 字体 ---------- */
--font-primary: "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;
--fs-micro: 10px; /* 角标 / 时间戳 */
--fs-xs: 11px; /* pill / 标签 */
--fs-sm: 12px; /* 摘要 */
--fs-base: 13px; /* 正文 */
--fs-md: 14px; /* 卡片标题 */
--fs-lg: 17px; /* 板块标题 */
--fs-xl: 22px; /* 大数字 */
--fs-2xl: 28px; /* KPI 主数字 */
--lh-tight: 1.25;
--lh-normal: 1.55;
--lh-loose: 1.7;
--tracking-wide: 0.5px;
--tracking-mono: 0.3px;
/* ---------- 圆角 ---------- */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
/* ---------- 阴影 / 发光 ---------- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
--shadow-glass-lg: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
--glow-brand: 0 0 12px rgba(255, 107, 53, 0.45);
--glow-success: 0 0 10px rgba(94,234,212, 0.4);
--glow-danger: 0 0 10px rgba(255, 51, 102, 0.45);
--glow-cyan: 0 0 14px rgba(34, 211, 238, 0.35);
/* ---------- 玻璃模糊 ---------- */
--blur-sm: blur(6px);
--blur-md: blur(12px);
--blur-lg: blur(20px);
/* ---------- 动效 ---------- */
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-out: cubic-bezier(0.16, 1, 0.3, 1);
--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--duration-flow: 2400ms; /* 光带流动一周 */
--duration-pulse: 1800ms; /* 心跳脉冲一周 */
/* ---------- 间距（4px 基准） ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
/* ---------- 组件固定尺寸（与 mockup 一一对应） ---------- */
--h-statusbar: 32px; /* M1 顶部流动状态条 */
--h-infocard: 140px; /* M2 信息卡 */
--w-infocard: 168px;
--w-minimap: 360px; /* M3 mini-map */
--h-minimap: 220px;
--size-fab: 60px; /* M3 浮动小猫 */
--h-intel-row: 44px; /* M4 情报行 */
--w-rt-col: 165px; /* M5 实时感知栏 */
/* ---------- 层级 ---------- */
--z-base: 1;
--z-sticky: 100;
--z-minimap: 200;
--z-fab: 300;
--z-overlay: 400;
--z-toast: 500;
}
/* 降级：不支持 backdrop-filter 时用实色兜底，避免玻璃变全透明 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root {
--color-bg-card: #0f172a;
--color-bg-overlay: #0a0e1a;
--color-bg-elevated: #1e293b;
}
}
/* 无障碍：跟随系统降低动效 */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 1ms;
--duration-normal: 1ms;
--duration-slow: 1ms;
--duration-flow: 1ms;
--duration-pulse: 1ms;
}
}