/* FortiGate Inventory Design System V2 - tokens */
:root {
  --fi-primary: #0f5fd9;
  --fi-primary-600: #0b4fb8;
  --fi-primary-700: #093d8f;
  --fi-secondary: #ff6b35;
  --fi-accent: #7c3aed;
  --fi-success: #10b981;
  --fi-warning: #f59e0b;
  --fi-danger: #ef4444;
  --fi-info: #06b6d4;

  --fi-gray-50: #f8fafc;
  --fi-gray-100: #f1f5f9;
  --fi-gray-200: #e2e8f0;
  --fi-gray-300: #cbd5e1;
  --fi-gray-400: #94a3b8;
  --fi-gray-500: #64748b;
  --fi-gray-600: #475569;
  --fi-gray-700: #334155;
  --fi-gray-800: #1e293b;
  --fi-gray-900: #0f172a;

  --fi-bg: #f5f7fb;
  --fi-surface: #ffffff;
  --fi-surface-soft: #f8fafc;
  --fi-border: rgba(148, 163, 184, .28);
  --fi-text: #162033;
  --fi-text-muted: #64748b;

  --fi-font-sans: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fi-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fi-radius-sm: .375rem;
  --fi-radius-md: .625rem;
  --fi-radius-lg: .875rem;
  --fi-radius-xl: 1.125rem;
  --fi-radius-pill: 999px;

  --fi-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --fi-shadow-sm: 0 4px 16px rgba(15, 23, 42, .06);
  --fi-shadow-md: 0 10px 28px rgba(15, 23, 42, .08);
  --fi-shadow-lg: 0 18px 50px rgba(15, 23, 42, .12);

  --fi-space-1: .25rem;
  --fi-space-2: .5rem;
  --fi-space-3: .75rem;
  --fi-space-4: 1rem;
  --fi-space-5: 1.25rem;
  --fi-space-6: 1.5rem;
  --fi-space-8: 2rem;

  --fi-transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --fi-transition-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --fi-transition-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

body.app-dark-mode {
  --fi-bg: #0f1419;
  --fi-surface: #171d2b;
  --fi-surface-soft: #111827;
  --fi-border: rgba(148, 163, 184, .24);
  --fi-text: #f8fafc;
  --fi-text-muted: #cbd5e1;
  --fi-gray-50: #111827;
  --fi-gray-100: #1f2937;
  --fi-gray-200: #334155;
  --fi-gray-300: #475569;
  --fi-gray-400: #64748b;
  --fi-gray-500: #94a3b8;
  --fi-gray-600: #cbd5e1;
  --fi-gray-700: #e2e8f0;
  --fi-gray-800: #f1f5f9;
  --fi-gray-900: #ffffff;
  --fi-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --fi-shadow-sm: 0 8px 22px rgba(0, 0, 0, .26);
  --fi-shadow-md: 0 14px 34px rgba(0, 0, 0, .32);
  --fi-shadow-lg: 0 24px 58px rgba(0, 0, 0, .38);
}