/**
 * 焰魂 · Core 设计令牌（单一事实源）
 * 中性灰阶 + 细边框分层（Stripe / Linear 式工具感）；品牌橙仅用于关键行动与焦点。
 * L1：短 UI 动效、accent 别名、字距与画布语义；深浅见 html.dark / html.fj-admin-light。
 * @see docs/焰魂-V5.0-商业化视觉框架-Manifesto.md（唯一权威；数值仍以本文件为准）
 * @see docs/焰魂-L0-L1-Linear设计落地.md
 */

:root {
  /** 正文：Inter 优先（可回退系统栈）；见 admin-ui/index.html 字体 link */
  --fj-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Microsoft YaHei',
    'PingFang SC', sans-serif;

  --fj-text-xs: 0.75rem;
  --fj-text-sm: 0.8125rem;
  --fj-text-md: 0.875rem;
  --fj-text-lg: 1rem;
  --fj-text-xl: 1.25rem;
  --fj-text-2xl: 1.5rem;
  --fj-line-height-tight: 1.25;
  --fj-line-height-body: 1.55;

  --fj-letter-tight: -0.02em;
  --fj-letter-display: -0.03em;

  /** UI 动效（Linear 式偏短；大段主题切换略长） */
  --fj-duration-fast: 0.15s;
  --fj-duration-ui: 0.2s;
  --fj-duration-base: var(--fj-duration-ui);
  --fj-duration-theme: 0.28s;
  --fj-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fj-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  --fj-z-base: 0;
  --fj-z-sticky: 100;
  --fj-z-dropdown: 2000;
  --fj-z-modal: 3000;
  --fj-z-toast: 4000;
  --fj-z-tooltip: 5000;

  --fj-breakpoint-sm: 768px;
  --fj-breakpoint-md: 1024px;

  --fj-brand: #ff6b35;
  --fj-orange-500: #ff6b35;
  --fj-orange-400: #ff9a6e;
  --fj-orange-600: #ea580c;
  --fj-orange-800: #c2410c;
  --fj-danger: #ef4444;
  --fj-success: #22c55e;
  --fj-ease-out: var(--fj-ease-out-expo);
  --fj-transition-theme: color var(--fj-duration-theme) var(--fj-ease-out),
    background-color var(--fj-duration-theme) var(--fj-ease-out), border-color var(--fj-duration-theme) var(--fj-ease-out),
    box-shadow var(--fj-duration-theme) var(--fj-ease-out);

  /** 主强调别名（当前 = 品牌橙；--fj-accent-bg 仅在 html.dark / html.fj-admin-light 中赋值） */
  --fj-accent: var(--fj-orange-500);
  --fj-accent-hover: var(--fj-orange-600);

  /** 密度档位预留（1 = 默认；紧凑模式将来可降至 0.92 等） */
  --fj-density-scale: 1;
  --fj-font-mono: 'Fira Code', 'JetBrains Mono', Consolas, ui-monospace, monospace;

  /** V5.0 品牌语义别名（映射到橙阶；hover 为设计稿 #E55A2B） */
  --fj-brand-primary: var(--fj-orange-500);
  --fj-brand-hover: #e55a2b;
  --fj-brand-surface: rgba(255, 107, 53, 0.1);
  --fj-brand-glow-strong: rgba(255, 107, 53, 0.25);
  --fj-qr-paper: #ffffff;

  --fj-space-1: 4px;
  --fj-space-2: 8px;
  --fj-space-3: 12px;
  --fj-space-4: 16px;
  --fj-space-5: 24px;
  --fj-space-6: 32px;

  --fj-radius-sm: 6px;
  --fj-radius-md: 10px;
  --fj-radius-lg: 14px;
  --fj-radius-xl: 18px;

  /** 管理端主内容最大宽（表格页略放宽） */
  --fj-admin-content-max: 1200px;

  --fj-admin-sidebar-width: 260px;
  /** 与《焰魂-V5.0-商业化视觉框架-Manifesto》黄金版心 1200px 对齐 */
  --fj-shop-content-max: 1200px;
  --fj-page-gutter: 24px;
  --fj-density-page-padding-admin: 24px;
  --fj-density-page-padding-shop: 32px;
}

html.dark {
  color-scheme: dark;
  /** V5.0 Admin 深渊灰阶（非商店纯黑；商店见 html.fj-shop） */
  --fj-bg-root: #0a0a0a;
  --fj-bg-canvas: var(--fj-bg-root);
  --fj-bg-base: #0a0a0a;
  --fj-bg-surface: #121212;
  --fj-bg-elevated: #161616;
  --fj-bg-surface-hover: #18181b;
  --fj-bg-hover: rgba(255, 255, 255, 0.055);
  --fj-border-subtle: rgba(255, 255, 255, 0.06);
  --fj-border-base: rgba(255, 255, 255, 0.1);
  --fj-border-hover: rgba(255, 255, 255, 0.15);
  --fj-border-strong: rgba(255, 255, 255, 0.2);
  --fj-orange-glow: rgba(255, 107, 53, 0.22);
  --fj-orange-bg: rgba(255, 107, 53, 0.1);
  --fj-accent-bg: var(--fj-orange-bg);
  --fj-text-title: #ffffff;
  --fj-text-primary: #ededed;
  --fj-text-secondary: #a1a1aa;
  --fj-text-tertiary: #71717a;
  --fj-text-on-primary: #fafafa;
  --fj-danger-bg: rgba(239, 68, 68, 0.1);
  /** 管理后台卡片：默认无弥散阴影，靠 1px 边框分层（商店仍可用 float） */
  --fj-shadow-card: none;
  --fj-admin-surface-shadow: none;
  --fj-shadow-float: 0 16px 48px -12px rgba(0, 0, 0, 0.55);
  --fj-glass-header-bg: rgba(12, 14, 18, 0.88);
  --fj-metric-hover-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --fj-code-cell-bg: var(--fj-bg-hover);
  --fj-bg-metric-tint: rgba(255, 107, 53, 0.08);
  --fj-danger-zone-body-bg: rgba(239, 68, 68, 0.04);
  --fj-text: var(--fj-text-primary);
  --fj-muted: var(--fj-text-secondary);

  --fj-warning: #f59e0b;
  --fj-warning-bg: rgba(245, 158, 11, 0.12);
  --fj-info: #3b82f6;
  --fj-info-bg: rgba(59, 130, 246, 0.12);
  --fj-success-bg: rgba(34, 197, 94, 0.12);
  --fj-success-fg: #4ade80;
  --fj-success-fg-strong: #22c55e;
  --fj-info-fg: #60a5fa;
  --fj-info-fg-strong: #3b82f6;
  --fj-danger-fg: #f87171;
  --fj-danger-fg-strong: #ef4444;
  --fj-warning-fg: #fbbf24;
  --fj-neutral-fg: #94a3b8;

  --fj-focus-ring: var(--fj-orange-500);
  --fj-focus-ring-offset: 2px;
  --fj-backdrop-scrim: rgba(0, 0, 0, 0.65);

  --fj-trend-up: #4ade80;
  --fj-trend-down: #f87171;

  /** V5.0 Stripe 级语义状态（与旧 --fj-success 并存；新界面优先 status-*） */
  --fj-status-success: #10b981;
  --fj-status-success-bg: rgba(16, 185, 129, 0.1);
  --fj-status-danger: #ef4444;
  --fj-status-danger-bg: rgba(239, 68, 68, 0.1);
  --fj-status-warning: #f59e0b;

  /** 主区氛围光（由品牌色 / 信息色混透明，仅作背景层次） */
  --fj-admin-mesh-a: color-mix(in srgb, var(--fj-orange-500) 9%, transparent);
  --fj-admin-mesh-b: color-mix(in srgb, var(--fj-info) 7%, transparent);
}

html.fj-admin-light {
  color-scheme: light;
  --fj-bg-root: #fbfbfb;
  --fj-bg-canvas: var(--fj-bg-root);
  --fj-bg-base: #eef1f6;
  --fj-bg-surface: #ffffff;
  --fj-bg-elevated: #ffffff;
  --fj-bg-surface-hover: #f4f4f5;
  --fj-bg-hover: rgba(15, 23, 42, 0.04);
  --fj-border-subtle: rgba(15, 23, 42, 0.08);
  --fj-border-base: rgba(15, 23, 42, 0.11);
  --fj-border-hover: rgba(15, 23, 42, 0.16);
  --fj-border-strong: rgba(15, 23, 42, 0.2);
  --fj-orange-glow: rgba(255, 107, 53, 0.2);
  --fj-orange-bg: rgba(255, 107, 53, 0.08);
  --fj-accent-bg: var(--fj-orange-bg);
  --fj-text-title: #0a0a0a;
  --fj-text-primary: #18181b;
  --fj-text-secondary: #52525b;
  --fj-text-tertiary: #94a3b8;
  --fj-text-on-primary: #ffffff;
  --fj-danger-bg: rgba(239, 68, 68, 0.08);
  --fj-shadow-card: none;
  --fj-admin-surface-shadow: none;
  --fj-shadow-float: 0 12px 40px -8px rgba(15, 23, 42, 0.12);
  --fj-glass-header-bg: rgba(255, 255, 255, 0.92);
  --fj-metric-hover-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.1);
  --fj-code-cell-bg: #f1f5f9;
  --fj-bg-metric-tint: #fff7f4;
  --fj-danger-zone-body-bg: rgba(239, 68, 68, 0.06);
  --fj-text: var(--fj-text-primary);
  --fj-muted: var(--fj-text-secondary);

  --fj-warning: #d97706;
  --fj-warning-bg: rgba(245, 158, 11, 0.14);
  --fj-info: #2563eb;
  --fj-info-bg: rgba(59, 130, 246, 0.1);
  --fj-success-bg: rgba(34, 197, 94, 0.12);
  --fj-success-fg: #15803d;
  --fj-success-fg-strong: #16a34a;
  --fj-info-fg: #2563eb;
  --fj-info-fg-strong: #1d4ed8;
  --fj-danger-fg: #dc2626;
  --fj-danger-fg-strong: #b91c1c;
  --fj-warning-fg: #d97706;
  --fj-neutral-fg: #64748b;

  --fj-focus-ring: var(--fj-orange-500);
  --fj-focus-ring-offset: 2px;
  --fj-backdrop-scrim: rgba(15, 23, 42, 0.45);

  --fj-trend-up: #16a34a;
  --fj-trend-down: #dc2626;

  --fj-status-success: #059669;
  --fj-status-success-bg: rgba(5, 150, 105, 0.1);
  --fj-status-danger: #dc2626;
  --fj-status-danger-bg: rgba(220, 38, 38, 0.1);
  --fj-status-warning: #d97706;

  --fj-admin-mesh-a: color-mix(in srgb, var(--fj-orange-500) 6%, transparent);
  --fj-admin-mesh-b: color-mix(in srgb, var(--fj-info) 5%, transparent);
}

html.fj-shop.dark,
html.dark.fj-shop {
  --fj-bg-root: #000000;
  --fj-bg-canvas: #000000;
  /** 商店卡片可略浮于纯黑底 */
  --fj-bg-base: #0a0a0a;
  --fj-bg-surface: #121212;
  --fj-shadow-card: 0 0 40px var(--fj-brand-glow-strong), inset 0 0 20px rgba(255, 107, 53, 0.05);
  --fj-page-gutter: 20px;
  --fj-density-page-padding-shop: 36px;
}

@media (max-width: 768px) {
  :root {
    --fj-page-gutter: 16px;
  }
}