:root {
  --fonu-brand: #10b981;
  --fonu-brand-hover: #059669;
  --fonu-brand-soft: rgba(16, 185, 129, 0.12);
  --fonu-brand-text: #047857;
  --fonu-brand-sidebar: #10b981;

  --fonu-success: #10b981;
  --fonu-warning: #f59e0b;
  --fonu-error: #ef4444;
  --fonu-disabled: #94a3b8;
  --fonu-info: #3b82f6;
  --fonu-info-soft: rgba(59, 130, 246, 0.1);
  --fonu-error-soft: rgba(239, 68, 68, 0.1);

  --fonu-bg: #f8fafc;
  --fonu-bg-muted: #f3f4f6;
  --fonu-banner-bg: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 40%, #a7f3d0 100%);
  --fonu-banner-border: rgba(16, 185, 129, 0.2);
  --fonu-surface: #ffffff;
  --fonu-border: #e5e7eb;
  --fonu-text: #111827;
  --fonu-text-secondary: #6b7280;
  --fonu-text-muted: #9ca3af;

  --fonu-radius: 12px;
  --fonu-radius-sm: 8px;
  --fonu-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --fonu-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);

  --fonu-sidebar-width: 240px;
  --fonu-topbar-height: 56px;
  --fonu-form-max: 720px;

  --fonu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --fonu-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;

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

html.dark,
[data-theme='dark'] {
  --fonu-brand-soft: rgba(16, 185, 129, 0.18);
  --fonu-brand-text: #6ee7b7;
  --fonu-info-soft: rgba(59, 130, 246, 0.16);
  --fonu-error-soft: rgba(239, 68, 68, 0.16);

  --fonu-bg: #0f172a;
  --fonu-bg-muted: #1e293b;
  --fonu-surface: #1e293b;
  --fonu-border: #334155;
  --fonu-text: #f1f5f9;
  --fonu-text-secondary: #94a3b8;
  --fonu-text-muted: #64748b;
  --fonu-banner-bg: linear-gradient(135deg, #064e3b 0%, #065f46 45%, #047857 100%);
  --fonu-banner-border: rgba(52, 211, 153, 0.25);

  --fonu-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --fonu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
}