frontend/src/theme.css

/* Precision Sentinel Design System CSS Tokens */
:root {
  /* Colors */
  --surface: #f8f9ff;
  --surface-dim: #cbdbf5;
  --surface-bright: #f8f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eff4ff;
  --surface-container: #e5eeff;
  --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe;
  --on-surface: #0b1c30;
  --on-surface-variant: #434655;
  --inverse-surface: #213145;
  --inverse-on-surface: #eaf1ff;
  
  --outline: #737686;
  --outline-variant: #c3c6d7;
  --surface-tint: #0053db;
  
  --primary: #004ac6;
  --on-primary: #ffffff;
  --primary-container: #2563eb; /* Strategic Security Blue */
  --on-primary-container: #eeefff;
  --inverse-primary: #b4c5ff;
  
  --secondary: #565e74;
  --on-secondary: #ffffff;
  --secondary-container: #dae2fd;
  --on-secondary-container: #5c647a;
  
  --tertiary: #943700;
  --on-tertiary: #ffffff;
  --tertiary-container: #bc4800;
  --on-tertiary-container: #ffede6;
  
  /* Saturated Serious Status Colors */
  --critical: #ba1a1a;
  --on-critical: #ffffff;
  --critical-container: #ffdad6;
  
  --high: #bc4800;
  --on-high: #ffffff;
  --high-container: #ffdbcd;
  
  --medium: #b58d00;
  --on-medium: #ffffff;
  --medium-container: #fff1be;
  
  --low: #2e7d32;
  --on-low: #ffffff;
  --low-container: #e8f5e9;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  
  /* Shapes */
  --rounded-sm: 0.125rem;
  --rounded-default: 0.25rem; /* Engineered 4px precision */
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem; /* 8px card roundedness */
  --rounded-xl: 0.75rem;
  --rounded-full: 9999px;
  
  /* Spacing (8pt grid system) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  
  --container-max: 1280px;
  --gutter: 24px;
}

/* Glassmorphism utility */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-variant);
}

/* Low-contrast ambient shadows */
.ambient-shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.01);
}