/**
 * SCMCC Console — Design Tokens
 * ==============================
 * 单一来源的 CSS 变量层，支持浅色/深色模式与全局换肤。
 *
 * 结构：
 *   Primitive  → 原始色值/数值（换肤时只改这一层）
 *   Semantic   → 语义化引用（组件代码主要使用这一层）
 *   Legacy     → 兼容旧 --dash-* 变量名，逐步淘汰
 *
 * 未来换肤：
 *   1. 修改 :root 中 Primitive 的 brand/success/warning/danger/info 色值；
 *   2. 所有组件因使用 Semantic token 会自动跟随；
 *   3. 如需新主题，新增 [data-theme="xxx"] 覆盖 Semantic 映射即可。
 */

/* ==================== Theme Override Layer ====================
 * 这一层允许通过外部 CSS 文件覆盖 Primitive token，
 * 实现 OEM 主题定制。覆盖文件只需要重新定义 --p-brand-* 和 --p-accent-* 系列即可。
 * 
 * 例如 themes/custom.css:
 *   :root {
 *     --p-brand-600: #2563eb;
 *     --p-accent-500: #06b6d4;
 *   }
 * 
 * 加载顺序：design-tokens.css → themes/custom.css
 * 后者覆盖前者，所有组件自动跟随。
 */

/* ==================== Primitive Tokens (Default: Deep Blue/Cyan — Industrial Monitoring Theme) ==================== */
:root {
  color-scheme: light;

  /* Brand — 深邃蓝，专业、稳定、工业感 */
  --p-brand-50:  #eff6ff;
  --p-brand-100: #dbeafe;
  --p-brand-200: #bfdbfe;
  --p-brand-300: #93c5fd;
  --p-brand-400: #60a5fa;
  --p-brand-500: #3b82f6;  /* vivid accent */
  --p-brand-600: #2563eb;  /* 主色 — 工业蓝 */
  --p-brand-700: #1d4ed8;  /* hover/active */
  --p-brand-800: #1e40af;
  --p-brand-900: #172554;

  /* Accent — 青色点缀，科技感 */
  --p-accent-50:  #ecfeff;
  --p-accent-100: #cffafe;
  --p-accent-200: #a5f3fc;
  --p-accent-400: #22d3ee;
  --p-accent-500: #06b6d4;
  --p-accent-600: #0891b2;

  /* Status — 色值更鲜活 */
  --p-success-50:  #ecfdf5;
  --p-success-100: #d1fae5;
  --p-success-600: #059669;
  --p-success-700: #047857;
  --p-success-800: #065f46;

  --p-warning-50:  #fffbeb;
  --p-warning-100: #fef3c7;
  --p-warning-600: #d97706;
  --p-warning-700: #b45309;
  --p-warning-800: #92400e;

  --p-danger-50:  #fef2f2;
  --p-danger-100: #fee2e2;
  --p-danger-600: #dc2626;
  --p-danger-700: #b91c1c;
  --p-danger-800: #991b1b;

  --p-info-50:  #f0f9ff;
  --p-info-100: #e0f2fe;
  --p-info-600: #0284c7;
  --p-info-700: #0369a1;
  --p-info-800: #075985;

  /* Neutral — slate 冷灰 */
  --p-slate-50:  #f8fafc;
  --p-slate-100: #f1f5f9;
  --p-slate-200: #e2e8f0;
  --p-slate-300: #cbd5e1;
  --p-slate-400: #94a3b8;
  --p-slate-500: #64748b;
  --p-slate-600: #475569;
  --p-slate-700: #334155;
  --p-slate-800: #1e293b;
  --p-slate-900: #0f172a;

  /* Geometry */
  --p-radius-sm: 4px;
  --p-radius-md: 6px;
  --p-radius-lg: 8px;
  --p-radius-xl: 10px;
  --p-radius-2xl: 12px;
  --p-radius-pill: 999px;

  /* Shadows — 品牌色 tinted */
  --p-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --p-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --p-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --p-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10);
  --p-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.14);

  /* Motion */
  --p-motion-fast: .15s ease;
  --p-motion-base: .2s cubic-bezier(.4, 0, .2, 1);
  --p-motion-slow: .3s ease;

  /* Typography scale */
  --p-font-sans: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --p-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;

  --p-fs-xs:   11px;
  --p-fs-sm:   13px;
  --p-fs-md:   14px;
  --p-fs-lg:   18px;
  --p-fs-xl:   22px;
  --p-fs-2xl:  30px;
  --p-fs-3xl:  38px;

  --p-lh-xs:  1.45;
  --p-lh-sm:  1.5;
  --p-lh-md:  1.55;
  --p-lh-lg:  1.4;
  --p-lh-xl:  1.3;
  --p-lh-2xl: 1.2;
  --p-lh-3xl: 1.1;

  --p-fw-regular:   400;
  --p-fw-medium:    500;
  --p-fw-semibold:  600;
  --p-fw-bold:      600;
  --p-fw-extrabold: 700;

  /* Spacing scale (4px base) */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;

  /* Layout */
  --p-sidebar-w: 220px;
  --p-sidebar-w-collapsed: 56px;
  --p-header-h: 52px;
}

/* ==================== Semantic Tokens (Light) ==================== */
:root {
  /* Brand */
  --color-brand:        var(--p-brand-600);
  --color-brand-strong: var(--p-brand-700);
  --color-brand-soft:   var(--p-brand-50);
  --color-brand-light:  var(--p-brand-500);
  --color-accent:       var(--p-accent-500);

  /* Status */
  --color-success:       var(--p-success-600);
  --color-success-soft:  var(--p-success-50);
  --color-success-text:  var(--p-success-800);

  --color-warning:       var(--p-warning-600);
  --color-warning-soft:  var(--p-warning-50);
  --color-warning-text:  var(--p-warning-800);

  --color-danger:        var(--p-danger-600);
  --color-danger-soft:   var(--p-danger-50);
  --color-danger-text:   var(--p-danger-800);

  --color-info:          var(--p-info-600);
  --color-info-soft:     var(--p-info-50);
  --color-info-text:     var(--p-info-800);

  /* Text */
  --color-text-default: var(--p-slate-800);
  --color-text-strong:  var(--p-slate-900);
  --color-text-muted:   var(--p-slate-600);
  --color-text-faint:   var(--p-slate-400);
  --color-text-inverse: #ffffff;

  /* Surfaces */
  --color-surface:      #ffffff;
  --color-surface-alt:  var(--p-slate-50);
  --color-surface-hover: var(--p-slate-100);
  --color-surface-2:    var(--p-slate-100);   /* elevated surface (quota track / divider) */

  /* Borders & dividers */
   --color-border-default: var(--p-slate-300);
  --color-border-subtle:  var(--p-slate-100);
  --color-border-strong:  color-mix(in srgb, var(--color-brand-strong) 24%, transparent);

  /* Status soft backgrounds & foregrounds */
  --color-ok-bg:   var(--color-success-soft);
  --color-ok-fg:   var(--color-success-text);
  --color-warn-bg: var(--color-warning-soft);
  --color-warn-fg: var(--color-warning-text);
  --color-err-bg:  var(--color-danger-soft);
  --color-err-fg:  var(--color-danger-text);
  --color-info-bg: var(--color-info-soft);
  --color-info-fg: var(--color-info-text);
  --color-muted-bg: var(--p-slate-100);
  --color-muted-fg: var(--p-slate-600);

  --color-link: var(--color-brand);
  --color-link-hover: var(--color-brand-strong);
  --color-focus-ring: color-mix(in srgb, var(--color-brand) 25%, transparent);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-dark: rgba(0, 0, 0, 0.12);

  /* Radius & shadows aliased for component use */
  --radius-sm:   var(--p-radius-sm);
  --radius-md:   var(--p-radius-md);
  --radius-lg:   var(--p-radius-lg);
  --radius-xl:   var(--p-radius-xl);
  --radius-2xl:  var(--p-radius-2xl);
  --radius-pill: var(--p-radius-pill);

  --shadow-xs: var(--p-shadow-xs);
  --shadow-sm: var(--p-shadow-sm);
  --shadow-md: var(--p-shadow-md);
  --shadow-lg: var(--p-shadow-lg);
  --shadow-xl: var(--p-shadow-xl);

  --motion-fast: var(--p-motion-fast);
  --motion-base: var(--p-motion-base);
  --motion-slow: var(--p-motion-slow);

  /* NVR Video Wall Surfaces — 浅色模式用品牌色底调，避免纯灰 */
  --nvr-page-bg:    color-mix(in srgb, var(--color-surface) 97%, var(--color-brand));
  --nvr-layout-bg:  color-mix(in srgb, var(--color-surface) 93%, var(--color-brand));
  --nvr-sidebar-bg: color-mix(in srgb, var(--color-surface) 88%, var(--color-brand));
}
/* ==================== Legacy aliases (compatibility) ====================
 * 旧代码中大量使用的 --dash-* / --c-* 变量名，在此映射到新的 semantic token。
 * 新代码请优先使用 --color-* 语义变量；旧变量将在后续重构中逐步移除。
 */
:root {
  --dash-blue:         var(--color-brand);
  --dash-blue-strong:  var(--color-brand-strong);
  --dash-blue-soft:    var(--color-brand-soft);
  --dash-cyan:         var(--color-accent);

  --dash-green:        var(--color-success);
  --dash-amber:        var(--color-warning);
  --dash-red:          var(--color-danger);
  --dash-slate:        var(--color-muted-fg);

  --dash-ink:          var(--color-text-strong);
  --dash-body:         var(--color-text-default);
  --dash-muted:        var(--color-text-muted);
  --dash-faint:        var(--color-text-faint);
  --dash-line:         var(--color-border-default);
  --dash-line-soft:    var(--color-border-subtle);
  --dash-surface:      var(--color-surface);
  --dash-surface-alt:  var(--color-surface-alt);
  --dash-surface-hover: var(--color-surface-hover);

  --dash-r-sm: var(--radius-sm);
  --dash-r-md: var(--radius-md);
  --dash-r-lg: var(--radius-lg);
  --dash-r-xl: var(--radius-xl);
  --dash-r-pill: var(--radius-pill);

  --dash-sh-xs: var(--shadow-xs);
  --dash-sh-sm: var(--shadow-sm);
  --dash-sh-md: var(--shadow-md);
  --dash-sh-lg: var(--shadow-lg);

  --dash-fast: var(--motion-fast);
  --dash-base: var(--motion-base);

  --dash-ok-bg:   var(--color-ok-bg);
  --dash-ok-fg:   var(--color-ok-fg);
  --dash-warn-bg: var(--color-warn-bg);
  --dash-warn-fg: var(--color-warn-fg);
  --dash-err-bg:  var(--color-err-bg);
  --dash-err-fg:  var(--color-err-fg);
  --dash-info-bg: var(--color-info-bg);
  --dash-info-fg: var(--color-info-fg);
  --dash-muted-bg: var(--color-muted-bg);
  --dash-muted-fg: var(--color-muted-fg);

  /* monitor.css 中使用的 --c-* 系列也做兼容映射 */
  --c-brand:        var(--color-brand);
  --c-brand-light:  var(--color-brand-light);
  --c-brand-dark:   var(--color-brand-strong);
  --c-success:      var(--color-success);
  --c-warning:      var(--color-warning);
  --c-danger:       var(--color-danger);
  --c-info:         var(--color-info);
  --c-text:         var(--color-text-default);
  --c-text-muted:   var(--color-text-muted);
  --c-surface:      var(--color-surface);
  --c-surface-alt:  var(--color-surface-alt);

  /* Hero 背景色 - 使用 token 便于主题覆盖 */
  --hero-bg-start: #0f172a;
  --hero-bg-mid:   #1e293b;
  --hero-bg-end:   #1e3a8a;
  
  /* Footer */
  --c-footer-bg:       var(--color-surface-alt);
  --c-footer-border:   var(--color-border-default);
  --c-footer-text:     var(--color-text-muted);
  --c-footer-text-hover: var(--color-text-default);
}