:root {
  --lion-font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --lion-font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;

  --lion-bg-page: #f8fafc;
  --lion-bg-card: #ffffff;
  --lion-bg-card-muted: #f8fafc;
  --lion-bg-card-soft: #f1f5f9;
  --lion-bg-brand-soft: #eff6ff;
  --lion-bg-emerald-soft: #ecfdf5;

  --lion-border-soft: #e2e8f0;
  --lion-border-strong: #cbd5e1;

  --lion-text-strong: #0f172a;
  --lion-text-body: #334155;
  --lion-text-muted: #64748b;
  --lion-text-subtle: #94a3b8;

  --lion-fs-page-xl: 30px;
  --lion-fs-page-lg: 24px;
  --lion-fs-title-lg: 18px;
  --lion-fs-title-md: 16px;
  --lion-fs-body-md: 14px;
  --lion-fs-body-sm: 13px;
  --lion-fs-caption: 12px;

  --lion-lh-tight: 1.15;
  --lion-lh-title: 1.25;
  --lion-lh-body: 1.6;
  --lion-lh-caption: 1.45;

  --lion-brand-500: #2563eb;
  --lion-brand-600: #1d4ed8;
  --lion-brand-700: #1e40af;
  --lion-emerald-600: #059669;
  --lion-amber-600: #d97706;
  --lion-rose-600: #dc2626;

  --lion-radius-md: 14px;
  --lion-radius-lg: 18px;
  --lion-radius-xl: 24px;
  --lion-radius-2xl: 28px;

  --lion-space-1: 4px;
  --lion-space-2: 8px;
  --lion-space-3: 12px;
  --lion-space-4: 16px;
  --lion-space-5: 20px;
  --lion-space-6: 24px;
  --lion-space-7: 28px;
  --lion-space-8: 32px;

  --lion-control-sm: 34px;
  --lion-control-md: 40px;
  --lion-control-lg: 52px;

  --lion-shadow-card: 0 20px 46px -30px rgba(15, 23, 42, 0.28);
  --lion-shadow-soft: 0 12px 28px -20px rgba(15, 23, 42, 0.18);
  --lion-shadow-brand: 0 18px 34px -20px rgba(37, 99, 235, 0.35);

  --lion-state-success-bg: #f0fdf4;
  --lion-state-success-border: #bbf7d0;
  --lion-state-success-text: #16a34a;
  --lion-state-info-bg: #eff6ff;
  --lion-state-info-border: #bfdbfe;
  --lion-state-info-text: #2563eb;
  --lion-state-warning-bg: #fffbeb;
  --lion-state-warning-border: #fde68a;
  --lion-state-warning-text: #d97706;
  --lion-state-danger-bg: #fef2f2;
  --lion-state-danger-border: #fecaca;
  --lion-state-danger-text: #dc2626;

  --lion-dur-fast: 180ms;
  --lion-dur-base: 240ms;
}

.dark {
  --lion-bg-page: #020617;
  --lion-bg-card: #0f172a;
  --lion-bg-card-muted: #0b1120;
  --lion-bg-card-soft: rgba(15, 23, 42, 0.72);
  --lion-bg-brand-soft: rgba(30, 64, 175, 0.16);
  --lion-bg-emerald-soft: rgba(6, 78, 59, 0.3);

  --lion-border-soft: #1e293b;
  --lion-border-strong: #334155;

  --lion-text-strong: #f8fafc;
  --lion-text-body: #cbd5e1;
  --lion-text-muted: #94a3b8;
  --lion-text-subtle: #64748b;

  --lion-brand-500: #60a5fa;
  --lion-brand-600: #3b82f6;
  --lion-brand-700: #2563eb;
  --lion-emerald-600: #34d399;
  --lion-amber-600: #fbbf24;
  --lion-rose-600: #fca5a5;

  --lion-shadow-card: none;
  --lion-shadow-soft: none;
  --lion-shadow-brand: 0 16px 30px -22px rgba(37, 99, 235, 0.28);

  --lion-state-success-bg: rgba(20, 83, 45, 0.24);
  --lion-state-success-border: rgba(22, 163, 74, 0.38);
  --lion-state-success-text: #86efac;
  --lion-state-info-bg: rgba(30, 64, 175, 0.2);
  --lion-state-info-border: rgba(37, 99, 235, 0.38);
  --lion-state-info-text: #93c5fd;
  --lion-state-warning-bg: rgba(120, 53, 15, 0.22);
  --lion-state-warning-border: rgba(217, 119, 6, 0.38);
  --lion-state-warning-text: #fcd34d;
  --lion-state-danger-bg: rgba(127, 29, 29, 0.22);
  --lion-state-danger-border: rgba(220, 38, 38, 0.34);
  --lion-state-danger-text: #fca5a5;
}